Up next in 10
Avoid common pitfalls in web design by checking out this insightful tutorial – "Are You Making This Mistake With CSS Colors?" In this video, you'll discover a critical mistake many developers make with CSS colors and learn how to rectify it. The tutorial sheds light on the importance of color choices, contrasts, and accessibility considerations, providing practical tips to enhance your website's visual appeal and user experience. Whether you're a seasoned designer looking to refine your color strategies or a developer aiming to create more visually harmonious websites, this guide offers a quick and valuable lesson. Join this tutorial to ensure your CSS color choices are on point, creating a more aesthetically pleasing and user-friendly online environment.
Show More Show Less View Video Transcript
0:00
If you're writing colors in CSS and you're not using HSL
0:03
you're making your life 10 times harder than it needs to be. Welcome back to Web Dev Simplified
0:11
My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner
0:16
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this
0:20
Now to get started, I just have a really simple HTML page that has a single div for a color
0:24
and that color just spans the entire page as a height of 150 pixels and a background color of red
0:30
And generally for you, when you're defining colors inside of CSS, you're going to either use a built-in color
0:34
like red, black, white, or you're gonna use something like a hex value. So like 333 here is gonna give you this gray color
0:40
You might use some RGB value. So you can say like 25500, that's going to give you red
0:46
But generally, you're not gonna know exactly what these colors are. They're not gonna be super easy like pure red or pure gray
0:52
Instead, you're gonna have a hex value that looks something like this
0:57
where you don't know what this hex value is at all. It's some kind of grayish blue looking color
1:01
but you're not really sure what the exact value of this is just by looking at it
1:05
Or if you saw this, you know what this hex value is until you save and see
1:10
oh, it's a lime green color. Same thing with RGB. When you have RGB and you got like 242, 13, and 57
1:18
you don't really know what this is until you click save and see, okay, it's become some kind of reddish looking color
1:24
and usually when you're picking out your colors, you're gonna pick them out on a color picker like the one built into VS Code
1:28
And you're gonna slide it around and be like, you know, I want it to be a little bit lighter, a little bit more transparent or less transparent
1:33
and you want it to be a different shade like green, for example. And that's how you're going to pick out your different colors
1:37
You click save and you can see it's gonna propagate over. But what if you could actually use that color picker
1:43
in CSS when you're writing CSS? Essentially, you could write CSS just like it was a color picker
1:48
Well, that's the idea behind HSL. If I click here, you can see we can convert this
1:51
to a hexadecimal value. If I click again, we can convert to HSL
1:55
And HSL is great because essentially it's built out of three parts. The hue, the saturation, and the lightness
2:00
The hue is essentially just this color picker here. As you can see, as I slide this color up and down
2:04
to change the hue, it's only changing the H value inside of my HSL, as you can see right here
2:09
So H stands for the hue inside of your color picker. Now, the second character, S, that stands for saturation
2:14
And that's essentially like moving horizontally on a color picker. It's not 100% moving horizontally
2:19
but if I move horizontally, you can see that my lightness value is gonna stay almost the same
2:23
but my saturation value is changing drastically. It's a little hard for me to move exactly side to side perfectly
2:28
but you can see all the way on the far left, we have 0% saturation. If we move all the way to the far right
2:32
you can see we have 100% saturation. And lightness, which is the final number
2:36
that's like moving up and down. As you can see at the very bottom, we have 0%
2:40
At the top right corner, we have 50%. And in the top left corner, we have 100
2:45
for that lightness value. Now, to understand these values a little bit better, I actually have some code down here
2:49
I'm just going to uncomment that. It kind of describes exactly what the different values
2:53
for hue, saturation, and lightness are going to be. Let me just uncomment this real quick
2:57
so you can see what I'm talking about. And if I click save, you can see here, our first thing is our hue, and a hue is like a color wheel
3:03
Your hue is going to go between values of zero and 360. So if I just come in here with like 50%, 50%
3:11
and I just say that our hue is zero, that's going to give us a red color. I change our hue to 200
3:15
we're now going to have a blue color. I'm in here with 100, we're gonna have green
3:19
So it's a color wheel that starts at red and goes all the way around back to red
3:23
So red is zero and 360. If I put 360, you can see we looped
3:27
all the way back around to red again. Saturation, which is that second value
3:31
goes between zero and 100%, where 100% is like full on all of the colors
3:35
If I change this to 100%, we're going to get a much more red looking red
3:38
While if you lower the saturation to like 20%, you're going to get a much more gray color
3:42
And if you do 0% saturation, you're going to get a shade of gray
3:46
It doesn't matter what your hue is, you know, your hue could be 200
3:50
and it's not going to make any difference. If you have 0% saturation, you're always going to get gray
3:54
Now lightness is going to be our final value. And the lightness just determines how white or black the color is
3:59
At 50%, it's essentially just normal, 100% of that color. But as you bring lightness above 50%, closer to 100%
4:07
So for example, we put it 60 here, we get a brighter blue. So like 50 is this shade, 80% is gonna be a lighter blue
4:12
And when you get to 100%, that's just pure white. It doesn't matter what the rest of your values are
4:16
Same thing if you go below. If we do 30%, our blue gets darker, 20%
4:21
If you do 0%, then you get black. It doesn't matter what the rest of your values are
4:24
0% lightness is always black. Now the reason working with HSL is so nice
4:28
is not only because it's much more intuitive to read, to be like, okay, this is a hue of 200, I know that's blue
4:33
100% means it's like going to be full on, you know, saturated and I have 50% here
4:37
so it's like a very pure blue color. But also because it makes working with modifications
4:41
of the color much easier. By coming here and I do like a hover state, imagine that this is like a button, for example
4:47
I can take my background color and I'm just gonna, you know, make it a little bit darker. We'll say 30% here
4:51
Now when I hover, the blue gets a little bit darker. That's super easy to work with
4:55
All I did was change one value in HSL and now I have a slightly darker version of blue
4:59
But if I were to change this to be, you know, for example, hexadecimal, you can see
5:03
that if I read these two hexadecimal numbers, I'm not really sure 100% what happened
5:08
Like I don't know what 00AAFF versus 006699 is going to do
5:13
Is it gonna make it brighter? Is it gonna make it darker? Is it gonna make it a different color? I don't know
5:17
But if I convert these back to HSL, it makes so much more sense
5:21
I can just look at it and say, oh, you know what? This is 20% darker, or you know what
5:24
I can make it brighter. So I can come in here and say 70. And now it's going to get 20% brighter
5:28
when I hover over this color because it's having more lightness brought into that color
5:32
Another great thing about HSL is how well it works with CSS variables
5:36
For example, I can define a variable for our hue, which is 200
5:40
I can define a variable for our saturation, which is 100% and one for our lightness
5:46
which is going to be 50%. And then I can define our HSL here to use that hue variable
5:52
It can use the variable for saturation, and it can use the variable here for lightness
6:00
And as you can see, the color still looks exactly the same. But now, instead of my hover here
6:04
I can just change our lightness, make it 30%, save. And now you can see that it's automatically getting darker
6:12
And I don't have to copy around my colors between everything. I can just say, just change the lightness portion of it
6:17
instead of having to copy the hue and saturation value to them. While if you use something like hex
6:22
the entire color is one variable. So you have to move the entire color around
6:26
and redefine the entire color everywhere you go. So for example, I changed my hue here
6:30
to be a different hue. My button still darkens by the same amount. I didn't have to change any of my other code
6:35
You couldn't do that with RGB or hex. Also, if you're kind of confused by CSS variables
6:39
and are unsure how they work, I have a full video on them. I'll link in the cards and description for you
6:44
Also, if you want to take your CSS skills to the next level, you're going to want to check out
6:47
my full CSS selector cheat sheet in the description down below. It's completely free and covers every CSS selector
6:53
you're ever going to need. With that said, thank you very much for watching and have a good day