CSS: Specifying Colours in CSS

CSS: Specifying Colours in CSS

So far in my CSS when I’ve been putting colors in, I’ve been mostly using keywords like red, orange, black, grey, et cetera. In CSS, there is a big list of keywords.

So those are all the keywords you can use, but that definitely doesn’t cover all the possible colors that you want. So, in CSS, there are a few different ways we can specify colors. If you notice on the right of this keyword list, there’s something called the hex values.

And one time when I wrote white in here, I ended up using a hex value just because that’s what I normally do and I wasn’t thinking. So this is the hex value for white. So, the hex value for white looks like that and that will create white.

So let’s go and play with the background color here on my limegreen, or, my HTML document. So if I was to change the background color to FFFFFF, that would be a hex color. It would change the color of my document to white.

Now, I can change to another background color, another hex color.

#000000.

However many, six zeros, that would be black.

So this works in RGB. So the idea here is that the first two numbers represent red. The second two numbers represent green. And the last two numbers represent blue. So if I wanted the background color to be completely blue, I would write #00, so no red, 00 for no green, and then ff for only blue, like that.

So I get only blue. Maybe I want it to be only red, so that would be ff0000 like that. So that’s only red now. And if I wanted to make another color, I can sort of mix them together. So background color of ffff00 will give me yellow. So that’s red and green added together gives me yellow.

Now, you’ll notice that there’s more than just numbers here, there’s numbers and letters. Mostly we use the decimal system when we’re doing our math. And the decimal system from, goes from 0 to 9. The hexadecimal system goes from 0 to F. So it goes 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.

So f being the highest digit that you can use and 0 being the lowest digit. So right here, our f’s mean the highest number possible where 0 means the lowest number possible. When we’re making these, these background colors, if the colors are, are the different numbers in the digits in here are very similar, we get grey. So here, all that, all the colors all the way up, is white.

All the colors all the way down is black. But somewhere in between, if we go cccccc, that would be kind of a light gray. Or we could go three, 333333 like that, and that would be a dark gray.

Now, you’ll also notice that these are kind of repetitive, all these colors that I’ve been specifying. And if you look closely, the pairs are the same digits. So, this pair is both zeros, this pair is both zeros, and this pair is both zeros.

This pair is both f’s, zeros, zeros, f’s, f’s, zeros, three three threes. So, when you have colors like this, where all three pairs are matching numbers, you can simplify it a little bit. So I could just write this as fff. I would only have to write one of the pairs out of all the colors. Or this one could be just 000, because I’m simplifying the pairs down.

This one here would be 00F. And so on. So when I’m doing hex colors, if all the pairs are matching like this, I can simplify them just down to three digits. But I can also sort of go crazy on my back, my color here. So, I don’t have to use matching numbers, I could go a65dO3.

I’m making up some random color. Refresh, and there you go. I’ve made a kind of a brown color. Now, most often, when it comes to colors, you generally don’t necessarily make them up yourself. I make them up for the simple ones like white and black and red and green and stuff like that and greys, but for complex colors, you’re going to want to use a color picker.

So if you have Photoshop installed, you can go into Photoshop’s color palette here. And as you choose a color, like this one right here, you can see Photoshop gives you the hex color down here. So here’s one right here, dc whatever. I can use then, use that color in my website by just copying and pasting it.

And I’ll just paste it like that. And now I’ve selected a color from Photoshop and used that on my website. The most popular way for writing colors in your site is hex colors like we’ve done here. And that’s most often how I write hex colors.

But we can write colors other way. Another way is called RGB. So let’s take an example here for my h2. I want to write I want to change that to a sort of different light green. So I’m going to go in here kind of make a yellowy-green like this. This is going to be my new color here. Inside of CSS, we can use the hex color here, but we can also use these RGB numbers.

So I can copy these RGB numbers into CSS and use those as a color also. So in here, instead of writing light green, I’ll write RGB with brackets and copy these number, numbers in. So 205, 222, and 63. So now I can go into my browser and refresh, and you can see right here, I’m now using that new color. So that’s called RGB.

It’s not really much difference, there’s no difference using RGB over hex. I find hex a little bit shorter. But RGB can be very helpful if you want a semi-transparent background. So let’s go into Photoshop.

Let’s kind of pick a dark green right here. And I want to use this color, but I want it to be half transparent. And that’s called RGBA. It follows the same format. So we put the color in here, 84, 91, 29. 84, 91, 29, but then we put a fourth digit, which is how transparent the element, the color is.

So if I put 1, that’s completely opaque. So here’s my color. It’s completely opaque. If I was to go 0, it would be completely transparent, like that, and the background color would disappear. But if I did 0.5, the background color would now be semi-transparent. It’s half of, halfway between being opaque and transparent. So I can use RGBA in a really great way to make semi-transparent colors, which is really helpful.

The final way we can specify colors is using something called HSL. Now, Photoshop doesn’t support HSL color palette. But there’s some online tools like this one that allow you to use HSL. So right here, I’ve got a white, so let’s kind of make kind of a creamy color here.

Here’s my creamy color. So, here is an HSL, so I can copy this, go into here and change this to HSL. Now, you’ll notice, I actually have two ways of writing this. I can write it hsl like that. And that’s a good way to write my color. Or I can do hsla, just like rgba, where I can write a semi-transparency at the end here, 0.7.

So I’ll go and refresh in my browser. And so that made this here like a semi-transparent creamy color. Now, with RGB, the system is, this is how much red is in it, this is how much green is in it, and this is how much blue is in the color.

The HSL color palette is little, a little bit different. This defines the hue, so think of a color wheel. This is degrees of the hue. This is the saturation of that hue. So right now I’m choosing hue number 66. If I wanted to make it grayer, I would reduce the saturation to, like, 50%. And now that would be a little bit grayer. And then, this here is lightness.

So, between white and black, how bright or how dark you want it to be. So I could put this down to 40% like this and it would get darker. Or I could put it up to 100% and it would be super bright. So the HSL color system is kind of great in that you can use it to easily transform your colors as well as use the semi-transparency. So it’s a good color palette for that. The only downfall is, you have to use a color picker like this HSL Color Picker, because Photoshop doesn’t support HSL.

Leave a Comment

Your email address will not be published. Required fields are marked *