CSS Colors

[00:00:00]
>> Kevin Powell: Now we can dive into actually starting to style stuff, now that we know how to select it, how to do the different things. We've seen a few properties, we'll be diving into more. And the first thing I look at is color, color adds some life to our project, so I think it's a good place to start. We've been using keywords before. I used goldenrod. There's a whole list of color values you can use that are named values, that is quite interesting, but most of the time you're not going to use those because you don't know what goldenrod actually is, right?

[00:00:25]
It's, you know, it's maybe golden-ish, yellowish. Usually you're either going to be using hex codes, RGB functions, HSL functions, those are the big three, and then we have our keywords there. So quickly, hex codes start with a hashtag followed generally by six digits. Sometimes it'll be 3, and then we have the RGB, the brackets, HSL, we're going to be exploring those. So where do we use them? There's two different places we can use colors.

[00:00:54]
There's the color or a background color. So in this CodePen, I'm just going to come in really fast. Let's go grab our H1, H1. Color, and I'll use a keyword for now, even though I said we shouldn't, but let's just say that it's white. And I'm going to give it a background. Color of Dodger blue. Again, there's some interesting color name values in CSS. I'm not a Dodgers fan, but I like the color. So we get the blue coming in as the background and the color itself coming in as the text color.

[00:01:30]
Very simple. Another thing we can do is lower opacity of color values. You can't do that with named color values, so Dodger blue is Dodger blue. But if we're using hex codes, RGB colors, or HSL colors, you can lower the opacity of them. I'm going to be writing CSS in a way that you might not have seen before, but it's going to be the modern approach. I'm going to talk more about some other older ones, so just in case you're a bit confused at the beginning of this.

[00:01:56]
But I'm going to come on this Dodger blue here. Let's replace it with an HSL color. So when we're using HSL, the first value is the hue, hue is the color wheel. Red is at the top of the color wheel, you're just following the color wheel in a circle around. So let's just say, I know blue is around 200, I think 240 is a nice color. The next one is saturation. I'm going to say 100% saturation. I want it to be as bright as possible.

[00:02:24]
And the last one is the lightness. So there we go, we get a solid blue, maybe a bit too blue. I'm going to go back to 200 here. Very similar to the Dodger Blue we had actually. So saturation is full color. If you reduce your saturation, you're getting closer to gray. So 0 is gray, 50% is halfway to gray, so it just dulls the color out along the way. We'll go back to 100%. And the L over on this end is the lightness value, and that just means 50% is pure that color.

[00:02:57]
If you make it brighter, you're adding white. If you reduce the color, you're adding black, so you're getting your shades and your tints. So 75% instead would make it lighter because we're going closer to 100% lightness and the 25% here would get darker. And then I did mention the opacity, and actually I just want to check fast. I do have another one, good. So there's a second example you can dive into just with the background image, so we can actually see this.

[00:03:32]
So here on this one, I have an H1 with a background that's white, HSL. White is 0, 0%, 100%. These two values don't matter. If you have 100% lightness, it will always be white. And then if I want to lower the opacity of it, I can put a forward slash and put a number here, 0.5, and it will go to 50% opacity or the alpha value is becoming 50% or and then so we have essentially 50% opacity. You can also put a percentage here if you prefer.

[00:04:00]
It's going to do the exact same thing. So 10% or 90% and you can play with those values. You can do the same thing for text. It's a bit weird to lower the opacity of text. Let's do an RGB here. RGB is another color mode that we have. It's super common, so we just give a red value, green value, blue value. Maximum is 255, so if I did 255, 0, 0, well, pure red, because I'm saying all red, 0 green, 0 blue.

[00:04:29]
It's hard to, other than that, like if you start mixing these, it can be very hard to know what color is going to be, which is why I like HSL. I just as much, if you're coming up with your own colors, it's the easiest one, because you know this is the color. This one is the grayness of it, and this is lightness and darkness. RGB is kind of hard to like figure out once you start adding values in to know what color you're going to get.

[00:04:55]
So if I say 150, like I don't really know what I'm going to get, it's a pink color. It's very bright. So what if I want it less bright, maybe I come in here and it just becomes a little bit hard to play with, but it's, if you're copy pasting values from a design file, it's completely fine. Same way, I can add a forward slash and put in something like a 0.5 and we'll lower the opacity of the text. Again, you probably don't want to do that with text, but you can, you have that ability to if you want to, but it makes it less readable, especially if we didn't, if it was on an image, it would make it very hard to read.

[00:05:33]
So do be careful with that. You can lower the opacity using hex codes as well. Does anyone know how that works here? Has anyone played with opacity of a hex code? Yeah, Tanner. Isn't it you just add two more onto the hex code and those values are awesome. So if you come on, let's do a black background. Which would be a hashtag of 000000, so that's pure black. Just with the hex codes, if I did it all as Fs, then it would be pure white.

[00:06:07]
I will do white because it's the same as before. So, and hex codes are the same as RGB. The first two are your red, the second two are your green, the last two are your blue value. 0 is nothing, goes up to 9, then you get into the letters between A to F. So make it all the way to F, you can't go past that. As Tanner mentioned, if you want to lower the opacity, you can add two more digits. This will be 50%.

[00:06:34]
80 being 50% is not very intuitive. It just happens to be what would map there using the way the hex codes work. So I know people who do this and know more than that one value. This is the only one I know. If I'm doing it as a hex, I would generally suggest not using the eight digit hex codes. It's super unreadable. Nobody's going to know what's happening. But unless it's, you're making a little demo for yourself and you want to experiment with it, some people like learning those things, so by all means, if that's like a world that you want to dive into, feel free, but for using it with your teammates, they will get very mad at you, I'm assuming.

[00:07:07]
So there's the example of using it with a hex code. So which one should you use? If you're copy pasting values from a design file, use whichever one you want. If you're writing colors, like I mentioned, I like using HSL just because I know the first value is the hue. So if I change that again, I'm changing the color along the color wheel, then the saturation and the lightness, it just becomes very easy to predict what colors we're going to be getting.

[00:07:33]
So I like it. I tend to convert everything to that anyway, even if I'm just copying and pasting, just in case I need to make a tweak or add a new color. Quick word on the syntax. Some people might have been wondering what I was doing using spaces and not using commas. So traditionally speaking, colors were always done. Let's make this a little bigger. Using commas, like in this example here. Oh, quite a while ago, the CSS spec was updated and this is considered a legacy syntax now.

[00:08:01]
It still works, it will continue working, so if you're using it, it's not going to break anything, if you have the habit of doing it, it won't break. But this is the new syntax, which is the space separated syntax. That's also why I had the forward slash for the opacity. If I was using this, I would put a comma and then add in an alpha value. There's no forward slash in the old one. The reason I'm not showing that really beyond just mentioning it is because there's lots of new color functions that have been added to CSS.

[00:08:32]
We have a color, OKLCH, HWB, lab. There's a whole range that have been added. None of those allow for the comma separated syntax. Those only work with the space separated syntax, including the forward slash if you want to lower opacities. So my general advice is if you haven't really gotten used to it, you could definitely start doing it with the space separated syntax now, browser support's pretty good, so you should probably, I don't think you'd run into any issues using the space separated syntax.

[00:09:05]
Also, importantly, all the units are now optional. So all of these would work. I write mine this way. You can write it unitless. The unitless one, the browser support's not as good. It's a part of the spec, it should work everywhere, but, and I believe it's every browser supports it. It's just, it's not the newest. It's a little bit newer, so I still write it this way, just if I'm doing HSL RGB obviously there are no units, so you don't have to worry about it there.

[00:09:33]
Though you can use percentages if you want when you're doing RGB. Lastly, some of you might be familiar with RGBA and HSLA. I put out a post on Bluesky a little while ago, saying that, or mentioning this and saying how, the only code I ever see written anymore is by AI that's using it and had a lot of people going, I still use it. I was like, oh, maybe I'm wrong. And many, many people had no idea that you didn't have to do this if you want to include an alpha value.

[00:10:05]
I tried looking into the browser support of it to find out, but, and as much as I could find, I did some browser testing. We haven't needed it since 2018, I think. Don't quote me on that, but from all the testing I did using older browsers, as of 2018, every browser supported not having the A at the end. So, it's not a browser support thing, it's just a legacy thing that we don't need anymore. When you do it without the A, the browser's doing it for you behind the scenes.

[00:10:30]
So, it's just a syntactic thing to make our lives easier. I do want to mention, I'm not covering it because OKLCH and lab and there's other variants. Again, these don't include the A, that doesn't exist. It's space separated, you don't put the A, they're going to work. I'm going to the additional resources down here. I have put an article that I wrote a little while ago, or not that long ago on Piccalilli, that dives into actually has an answer to what you're asking.

[00:10:54]
But it goes into a lot of the newer stuff that's been added to CSS. It's a little bit out of scope of what I want to cover in this course, but if you're curious about what some of these things are, you could definitely dive into it. I still find myself using HSL for most things just because it's easy to predict and know what it is. We all thought OKLCH was going to fix some of the problems because there are a few with HSL, but it's actually really not that intuitive to write yourself.

[00:11:23]
It's color picker territory, so. That's what I tend to use, and I'd suggest in general to keep those things simple early on. And speaking of colors, as you can see right now we have two. We've been using random ones. I'm going to bring in the actual color values here for my project, so we can jump back there. It's been a little while, we haven't been in here, but let's open it up. And I can replace my goldenrods.

[00:11:58]
Oh, I took the wrong one though. Let's go get the right one. We can replace those goldenrods with this color value right here. I'm going to copy that and select those. Bring those in, and then my color black here, which is HSL 0, 0%, 20%. And I haven't saved yet. So now when I save, it won't be a big update, but we have more precise colors, except I just realized I put, oh yeah, we want that to be the black.

[00:12:25]
I said all the dark text should also be that color. For now, I'm going to come in and select my paragraphs. And I'm going to give those a color as well. So, whoops, wrong one, sorry, we want that to be our dark text as well, because most websites you get to, they don't actually use black as the back or as pure black, they're going to be using a dark, dark gray, it just tends to be a little bit easier on the eyes if it's on a white background.

[00:12:55]
So I can say all my paragraphs are using that. I also have the H3 actually, so let's come and add the H3s here so I don't forget anything. H3 can also use that color, HSL. 0, 0%, 20%. Select all the different things that I need to be my dark color, select the things I want that golden color, and our project is slowly coming together and getting close to that first design that we had. We have a few other changes to make, but we're getting there.