Up next in 10
Are You Making This Mistake With CSS Colors_ (1)
704 views
Feb 7, 2024
"Are You Making This Mistake With CSS Colors?" is likely an instructional video addressing common errors or misconceptions related to CSS color usage. The creator may highlight specific mistakes that developers commonly make when working with CSS colors, such as using non-standard color names, forgetting to specify the color format, or misunderstanding color values. Through clear explanations and examples, the video aims to help viewers avoid these mistakes and achieve better results in their CSS styling. By identifying and addressing potential pitfalls, viewers can expect to improve their understanding and proficiency in using CSS colors effectively in their web development projects.
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 WebDev 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:25
and that color just spans the entire page as a height of 150 pixels and a background color of red
0:29
And generally for you, when you're defining colors inside of CSS, you're going to either use
0:34
a built-in color like red, black, white, or you're going to use something like a hex value
0:38
So, like, 333 here is going to give you this gray color. You might use some RGB value, so you can say like 255-0-0
0:44
That's going to give you red. But generally, you're not going to know exactly what these colors are
0:49
They're not going to be super easy, like pure red or pure gray. Instead, you're going to have, you know, a hex value that looks something like this
0:56
where you don't know what this hex value is at all. I mean, it's some kind of grayish blue-looking color, but you're not really sure what the exact value of this is just by looking at it
1:05
Or if you saw, you know, like this, do you know what this hex value is until you save and see, oh, it's a lime green color
1:11
Same thing with RGB. When you have RGB and, you know, you got like 242, 13, and like 57, you don't really know what this is until you click save and see, okay, it's some kind of reddish-looking color
1:23
And usually when you're picking out your colors, you're going to pick them out on a color picker, like the one built-in-to-V-S code
1:28
you know, you're going to 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 going to propagate over But what if you could actually use that color picker in CSS when you writing CSS Essentially you could write CSS just like it was a color picker Well that the idea behind HSL
1:50
If I click here, you can see we can convert this to a hexadecimal value. If I click again, we can convert to HSL
1:55
And HSL is great because essentially is 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 to change the hue, it's only changing
2:06
the H value inside of my HSL, as you can see right here. So H stands for the hue inside of your color picker
2:12
Now the second character S, that stands for saturation, and that's essentially like moving horizontally on a color picker
2:17
It's not 100% moving horizontally, but if I move horizontal, you can see that my lightness value
2:22
is going to stay almost the same, but my saturation value is changing drastically
2:25
It's a little hard for me to move exactly side to side perfectly. But you can see all the way on the far left, we have 0% saturation
2:31
If we move all the way to the far right, 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%. At the top right corner, we have 50%
2:42
and in the top left corner, we have 100% for that lightness value
2:46
Now, to understand these values a little bit better, I actually have some code down here. I'm just going to uncomment that kind of describes exactly
2:52
what the different values for hue, saturation, and lightness are going to be. Let me just uncomment this real quick so you can see what I'm talking about
2:59
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 0 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. If I change our hue to 200, we're now going to have a blue color
3:17
Come in here with 100, we're going to have green. So it's a color wheel that starts at red and goes all the way around back to red
3:22
So red is zero and 360 If I put 360 you can see we looped all the way back around to red again Saturation which is that second value goes between 0 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. While if you lower the saturation to like 20%
3:40
you're going to get a much more gray color, 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, you could be 200, and it's not going to make any difference
3:51
If you have 0% saturation, you're always going to get gray. Now, lightness is going to be our final value, and the lightness just determines how white
3:58
or black the color is. At 50%, it's essentially just normal, 100% that color
4:03
But as you bring lightness above 50% closer to 100%, so for example, we put it 60 here, we get
4:08
a brighter blue. So like 50 is this shade, 80% is going to be a lighter blue, and when you get to 100%, that's
4:13
just pure white. It doesn't matter what the rest of your values are. Same thing if you go below
4:18
If we do 30%, our blue gets darker, 20%. If you do 0%, then you get black
4:22
It doesn't matter what the rest of your values are. 0% lightness is always black
4:26
Now the reason working with HSL is so nice is not only because it's much more intuitive to read
4:30
to be like, okay, this is a hue of 200, I know that's blue. 100% means it's like going to be full on, you know
4:36
saturated and I have 50% here, so it's like a very pure blue color. But also because it makes working with modifications
4:41
of the color much easier. If I come in here and I do like a hover state, imagine that this is like a button, for example
4:46
I can take my background color and I'm just going to, you know, make it a little bit darker. We'll say 30% here
4:51
Now when I hover, the blue gets a lot. little bit darker. That's super easy to work with. All I did was change one value in
4:56
HSL and now I have a slightly darker version of blue. But if I were to change this to be
5:00
you know, for example, hexadecimal, you can see that if I read these two hexadecimal
5:05
numbers I not really sure 100 what happened Like I don know what 0 versus 0 is going to do Is it going to make it brighter Is it going to make it brighter Is it going to make it a different color I don know But if I convert these back to HSL it makes so much more sense
5:20
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 when I hover over this color
5:29
because it's having more lightness brought into that color. Another great thing about HSL is how well it works with CSS variables
5:35
For example, I can define a variable for our hue, which is 200
5:39
I can define a variable for our saturation, which is 100%, and one for our lightness, which is going to be 50%
5:47
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 to 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, the entire color is one variable
6:23
so you have to move the entire color around and redefine the entire color everywhere you go
6:28
So for example, I change my hue here to be a different hue. My button still darkens by the same amount
6:33
I didn't have to change any of my other code. You couldn't do that with RGB or X
6:37
Also, if you're kind of confused by CSS variables and are unsure how they work, I have a full video on them
6:41
I'll link in the cards and description for you. Also, if you want to take your CSS skills to the next level
6:46
you're going to want to check out my full CSS selector cheat sheet in the description down below
6:50
It's completely free and covers every CSS selector you're ever going to need
6:54
And with that said, thank you very much for watching and have a good day
#Computer Education
#Programming
#Software