Check out a free preview of the full CSS In-Depth, v2 course:
The "Colors: RGB, HSL & HEX" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle looks at all the different ways of declaring colors in CSS, including currentColor and 8-digit hexadecimal alpha transparent color notation.

Get Unlimited Access Now

Transcript from the "Colors: RGB, HSL & HEX" Lesson

[00:00:01]
>> Estelle Weyl: So colors. These all these color have exact same value. They are all white. So you can declare it white, you can have a three digit hexadecimal value, a six digit hexadecimal value and you can also have an eight digit hexadecimal value. This might be new to some people, but the six characters are basically the white from above, and the last two Fs mean 100% opaque.

[00:00:28]
>> Estelle Weyl: So we now have eight digit hexadecimal values for the last two being so its rgba is basically what it is. Then we have rgb which is red, green, blue and you can either use 0 to 255 or you can use percents from 0 to 100. You cannot combine the two that is incorrect.

[00:00:49] You can't put percent on some and 0 to 255 on the other. So then we rgba which is the same thing but with the last value being the opacity. In this case, we're trying to get to 1, so it's 100% opaque, or 1. Then with hsl and hsla, which is hue, saturation, and lightness, which if you use Photoshop, it's similar to hue, saturation, and brightness I think?

[00:01:15] Yeah, HSB. And we have hsla, which is the same thing but with enough transparency at the end. And then we have two other things which is the key term of transparent and the key term of current color. Current color is the current color of the text. So let's go first to white which is the named key terms.

[00:01:42] We've got a bunch of them in CSS 2 and CSS 3, and or in CSS 2. The only one that was added since then is Rebecca Purple, so the co-author of this book, Eric Meyer, his daughter passed away on her sixth birthday. And because he's the Oprah of CSS, and his daughter's name was Rebecca, and her favorite color was purple, it was a color that was not yet used, I believe its 639, it's one of my favorite colors actually.

[00:02:24] So that's the only one that's been added since the original. Then we have current color and current color is a special color and no matter what color, and it's usually the default for a lot of things. So like if you do border, and you do three border solid, 3 pixels or just border solid.

[00:02:43] When you do a border, we'll cover that later, but borders you have to declare what type of border it is and that's all you have to declare. The other two values are default. They default to medium which is 3 pixels wide in most browsers. And they default to currentColor as the color.

[00:02:59] Which is the color of the text.
>> Estelle Weyl: There's other named colors, such as currentColor, which have become deprecated. So these will work in a lot of browsers. And they're just here for legacy reasons just to remind you, if you actually hit this, this was valid at one point.

[00:03:20] Then, we have RGB and RGBA. So all colors, well, that's not true. All colors used to be RGB, whether it was hexadecimal notation or RGB notation. Now, we have the HSL, which is different. And we also had CMKY, which is cayenne, magenta, which is for print. I don't know if that still exists or not.

[00:03:43] So when we have hexadecimal notation, the first two digits are the red, the second two digits are the green, the third two digits are the blue. Similarly, when we have RGB, it stands for red, green, blue. That's what the R, G, and the B stand for. As I said earlier, you can have it with numbers from 0 to 225, with 0 being black or complete lack of color, and 255 being complete saturation of color.

[00:04:14] Or you can do percent with zero being complete lack of color and 100% being complete saturation. And then we can also add an alpha transparency if we add the A at the end. So in this case, I use percents on the latter one and 0 through 55 on the prior one.

[00:04:35] Again you can't mix this up and what could I've done there as well is put 40 BF AC like CC something like that. No 66 probably for 0.2 I don't know what 0.2 actually is but I could have put those eight digit codes, but we'll cover that in a second.

[00:04:57] Then we have HSLA Colors, which are hue, saturation, lightness and alpha transparency. So the hues go from zero, which is red through to orange through to yellow, past yellow. Yellow is in there somewhere.
>> Estelle Weyl: Yeah, through to green and blue and purple and back to red. So this right here, that thing right there is actually 360 separate spans with each color in there.

[00:05:34] That's how I did that. I could've just used a gradient, but why make things easy when I can put 360 divs in there. Saturation. 100% saturation means full of color and 0% saturation is always going to be a gray because it means the color is completely not saturated.

[00:05:55] Generally, you wanna go with 100 there. And lightness, 100% is always gonna be white, 0 is always gonna be black, and 50% is kinda the midpoint of super bright color.
>> Estelle Weyl: And then alpha transparency, you have fully opaque and somewhat transparent. And the reason that you can still HSLA Colors right there, is because I have text shadow on there.

[00:06:26] So I have a color that is alpha transparent, but the text shadow is not. So box shadows are actually just shadows on the outside or on the inside of a element. Where as text shadow is actually behind the whole text, it's a copy of the text in a shadow form and you can move it, but it's actually a shadow of the whole text.

[00:06:53]
>> Estelle Weyl: Okay, then I have this little converter, I reprogrammed it for this task and I hope that it works because it worked a month ago when I reprogrammed it. Take some long time to make 702 slides. So here, if I change the alpha transparency, I can actually figure out what 0.2 is.

[00:07:18] 0.2 is 33. Remember when I was trying to figure it out. So here's my color converter. I have a GitHub repo, you can use it. It's open source. It basically allows you to pick any color you want and any alpha transparency you want but do you need this?

[00:07:38]
>> Estelle Weyl: Let me show you cool feature go off of transparency there, okay? I'm going to go and check my inspector. I'm going to go look at this div here. And it says the background color is RGB 245 148, that's what it says, right? Okay, cool. We got it right but if I open this up,

[00:08:04]
>> Estelle Weyl: It gives me the information here, and I can actually convert it to HSOA in hexadecimal right there.
>> Estelle Weyl: So you actually have a full on color picker in your developer tools which is how I pick the hideous color on the back of this slide deck. So I'll pick a color, open it up and then pick another color I thought clashes just enough to make it hideous and then that's how I pick the colors.

[00:08:37]
>> Estelle Weyl: So let's get out of here. Okay, another feature in here is, yeah, you see I use rebeccapurple a lot. This is the rebeccapurple and royalblue deck, and if I click on this text right here, and
>> Estelle Weyl: I go down to color.
>> Estelle Weyl: Anyone seeing color?
>> Estelle Weyl: If I open this up here, can you see that white line right there?

[00:09:17] That is an accessibility feature. If I wanna make sure that I have enough contrast, which currently, my contrast is at 11.9, which is serious contrast. But if I pick this color here, it'll say, low contrast. So there's actually, if you wanna make sure that your site is accessible, there's accessibility features, but there's actually separate accessibility features.

[00:09:37] But within this right here, if you're gonna pick a color, pick one that's below the line so that you know that you have enough color contrast for people with low vision. Okay, so then we have RGBA, so you saw that we used RGBA here, let me just update this.

[00:09:56] So that we're actually on track, okay. RG is the red, the green, the blue and the alpha and these were the different values. So 20% is 33, 75% is BF. And the we have Can I Use, oops, and so far it does not work in rereg and it's coming soon I guess the Samsung Internet browser, but it's working on Firefox, Chrome and Safari.

[00:10:36]
>> Estelle Weyl: Did I tell you we are gonna make ugly stuff today? This qualifies. Okay, so change the colors above, what does coloring color do? So the background, the color is this right? And the color rather is this form of pink so let's just call it pink. Because I can't really read HSL cuz I'm not a designer.

[00:11:06] So the thing is, the background, did you see how the background changed to pink when I did that? So let's do royal blue.
>> Estelle Weyl: So I'm changing the color, and then the current color change value. So the background change value because the current color change value. So currentColor is whatever color

[00:11:31]
>> Estelle Weyl: The foreground color or the the text colors at this time. So,
>> Estelle Weyl: If I did border solid. It's going to be that currentColor right? If I said border solid 3 pixels, it stays the same because the default is. And then if I do current color, it stays the same.

[00:11:58] But if I change this to green. The border's going to change because I used CurrentColor. It's whatever the color is. Okay. So a few tips. Transparent is rgba to transparent black. CurrentColor is the current text color. Accessibility, color should never be the only visual means of providing information to your user.

[00:12:21] So if your text is black, and your links are dark green, and they're not underline, some people can't see it. If your text is red, and your links are green, you have no taste but also some people can't read it cuz they're color blind. It's either low vision, it needs a high contrast or we have people, 10% of men have color blindness.

[00:12:46] And I used to ask sometimes in sessions, is there anyone here colour blind and apparently that is not a good thing to ask. So I don't ask that anymore.
>> Estelle Weyl: And then appearance, wow, I have no clue why this is on the slide but it's a good segway so it's probably gonna come up next.

[00:13:07] Appearance is a property that allows you to change the appearance of elements. So by default, the browser will say like the appearance of a button looks like a button and you can actually use Clearance to change that.