Are You Making This Mistake With CSS Colors?

if you're writing colors in css and you're not using hsl you're making your life 10 times harder than it needs to be [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started i just have a really simple html page that has a single div for a color and that color just spans the entire page has a height of 150 pixels and a background color of red and generally for you when you're defining colors inside of css you're going to either use a built-in color like red black white or you're going to use something like a hex value so like 333 here is going to give you this gray color you might use some rgb value so you could say like 255 0 0 that's going to give you red but generally you're not going to know exactly what these colors are 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 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 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 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 and usually when you're picking out your colors you're going to pick them out on a color picker like the one built into vs code you're going to slide it around be like you know i want it to be a little bit lighter a little bit more transparent or less transparent 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 you click save and you can see it's going to propagate over but what if you could actually use that color picker in css when you're writing css essentially you could write css just like it was a color picker well that's the idea behind hsl if i click here you can see we can convert this to a hexadecimal value if i click again we can convert to hsl and hsl is great because essentially it's built out of three parts the hue the saturation and the lightness 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 the h value inside of my hsl as you can see right here so h stands for the hue inside of your color picker now the second character s that stands for saturation and that's essentially like moving horizontally on a color picker it's not a 100 moving horizontally but if i move horizontally you can see that my lightness value is going to stay almost the same but my saturation value is changing drastically 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 zero percent saturation if we move all the way to the far right you can see we have 100 saturation and lightness which is the final number that's like moving up and down as you can see at the very bottom we have zero percent at the top right corner we have 50 and in the top left corner we have 100 for that lightness value 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 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 and if i click save you can see here our first thing is our hue and a hue is like a color wheel your hue is going to go between values of 0 and 360. so if i just come in here with like 50 50 percent and i just say that our hue is zero that's going to give us a red color if i change our q to 200 we're now going to have a blue color 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 so red is 0 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 zero and a hundred percent where 100 percent is like full on all of the colors if i change this to 100 we're going to get a much more red looking red well if you lower the saturation to like 20 percent you're going to get a much more gray color and if you do zero percent saturation you're going to get a shade of gray it doesn't matter what your hue is you know eq could be 200 it's not going to make any difference if you have zero percent saturation you're always going to get gray now lightness is going to be our final value and the lightness just determines how white or black the color is at 50 it's essentially just normal hundred percent of that color but as you bring lightness above 50 closer to 100 so for example we put 60 here we get a brighter blue so like 50 is this shade 80 is going to be a lighter blue when you get to 100 that's just pure white it doesn't matter what the rest of your values are same thing if you go below if we do 30 our blue gets darker 20 if you do 0 then you get black it doesn't matter what the rest of your values are 0 lightness is always black now the reason working with hsl is so nice 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 100 means it's like going to be full on you know saturated and i have 50 here so it's like a very pure blue color but also because it makes working with modifications 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 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 now when i hover the blue gets a little bit darker that's super easy to work with all i did was change one value in hsl and now i have a slightly darker version of blue but if i were to change this to be you know for example hexadecimal you can see that if i read these two hexadecimal numbers i'm not really sure hundred percent what happened like i don't know what zero zero aaaff versus zero zero six six nine nine is going to do is it gonna make it brighter is it gonna make it darker is it gonna make it a different color i don't know but if i convert these back to hsl it makes so much more sense i can just look at it and say oh you know what this is 20 darker or you know what 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 because it's having more lightness brought into that color another great thing about hsl is how well it works with css variables for example i can define a variable for our hue which is 200 i can define a variable for our saturation which is 100 and one for our lightness which is going to be 50 and then i can define our hsl here to use that view variable it can use the variable for saturation and it can use the variable here for lightness and as you can see the color still looks exactly the same but now inside of my hover here i can just change our lightness make it to 30 percent save and now you can see that it's automatically getting darker and i don't have to copy around my colors between everything i can just say just change the lightness portion of it instead of having to copy the hue and saturation value to them well if you use something like hex the entire color is one variable so you have to move the entire color around and redefine the entire color everywhere you go so for example i changed my hue here to be a different hue my button still darkens by the same amount i didn't have to change any of my other code you couldn't do that with rgb or x also if you're kind of confused by css variables and are unsure how they work i have a full video on them i'll link in the cards and description for you also if you want to take your css skills to the next level you're going to want to check out my full css selector cheat sheet in the description down below it's completely free and covers every css selector you're ever going to need with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 162,148

Keywords: webdevsimplified, hsl, css color, css hex, css hsl, css hsla, hsla, css color picker

Id: EJtmfkKulNA

Length: 6min 57sec (417 seconds)

Published: Sat Jul 10 2021