Why HSL colors are the best

CSS gives us plenty of different color formats to choose from. We have named colors, RGBs, hex codes and several other color formats. If you're new to CSS, you're probably using hex codes and RGBs because those are the most popular and widely used color formats. But what I've found is that there is a much better color format in CSS. A much more awesome, much more intuitive color format and that's HSL colors. HSL colors are awesome. much more intuitive to think about and that means that it's much easier for us humans to visualize and imagine HSL colors than RGB colors or hex codes or any other alternative. I mean think about it if I asked you to decode a color like FF715B how would you know that that's a red color or if I gave you the RGB color 183858 how would you know that that's actually a really dark shade of blue. You wouldn't because there's no easy way to identify these colors. But the beauty of HSL colors is that they make it very easy to see colors in our mind, to imagine these colors and to reason about them. So in this video, I will first show you what HSL colors even are and how they even work and then I'll show you why I prefer them over some other color formats. First of all, my name is Hassan. I'm a freelance web designer and I make educational content like this one just to share all my secrets. Now you're clearly interested in this so scroll down and click subscribe right now. It's a win-win for both of us. Now with the boring intro out of the way let's talk about HSL colors. First of all HSL stands for hue, color and saturation and these three properties are how we humans perceive color HSL makes it easier for us humans to reason about these colors HSL represents colors in a way that that matches how we humans perceive them And that makes it easier for us humans to reason about these colors HSL represents colors in a way that matches how we humans perceive them and that makes it easier for us to use these colors in our designs. Let's go through each of these properties one by one. Firstly hue. To understand hue look at this image first. This is a color wheel and the color wheel basically shows us all of the colors and the relationships between those colors. Now I took this image from MDN and this chart basically shows us all of the known colors in existence. We start at 0 degrees and then we just loop through the chart going all the way to 360 degrees which is just back to 0 degrees. The hue in HSL colors is actually a value from this color wheel, a value between 0 and 360. The hue is your position on the color wheel. Think of it like the property that allows you to identify two colors as blue even if they are not very similar. Here is an example. All of the colors in this image are blue. They're HSL colors and the only thing I've changed in them is the hue. And even though they're all different colors now, you can still tell that they're all blue. Now back to the color view. You can see that from 0 to 60 we have colors like red, yellow, orange. From 60 to 180 we go to greens and light blues. And then we enter the blue, purple, pink territory and then back to red. So by looking at the hue, not only can you roughly tell which color you're probably using, But you can also easily filter between warm colors and cool colors. You can see that from 0 to 180 we have mostly warm colors, but from 180 to 360 we have cooler colors like blue and purple. So this makes it very easy to imagine the colors that we're using. That's not all. We also have saturation and lightness. Let's talk about saturation now. Saturation describes how colorful a color is and I realize how weird that sounds but trust me that is actually the best explanation for this 100 saturation gives us full color while 0 saturation gives us zero color pure gray just devoid of any color. And when you play around with the saturation a bit you get some really rich colors. So look at how the color changes as I change the saturation here. We start with a very bright red color and as I lower the saturation it gets less and less colorful until it just becomes pure gray. At zero saturation changing the hue will do nothing because at zero saturation there's just zero color in it. Even if you change the hue it'll do nothing because at zero percent saturation all the color will be gone from the color. Now you should already start to see how much simpler HSL colors can be compared some of the alternatives. Now let's talk about lightness. Lightness is how bright or how dark your color is. At full 100% lightness you'll have pure white and at 0% lightness you'll have pure black. And again this is irrespective of hue or saturation. Even if you change the hue at 0% lightness it will be pure black and at full 100% lightness it will be pure white no matter what the hue is. So let's look at this bluish color as an example. At a 100% lightness we have pure pure white. As we decrease the lightness we start to see the blue color and then it just slowly gets darker and darker and darker until at 0% lightness we have pure darkness. Just like some of your lives. So that's how lightness works and before I forget to mention the impact of saturation is the strongest at 50% lightness. Meaning the color will look most colorful at 50% lightness. You can see that this bluish color looks most most bluish the most blue at 50 lightness Now you should already start to see how much simpler HSL colors are compared to the alternatives like RGB or hex codes or something else You can very easily tell what an HSL color is going to look like. You want a red color just pick a red hue. You want it to be very colorful or you want to mix in a bit of gray in there. You can adjust that easily with saturation. You want it to be a bright color or a dark color. Adjust the lightness. It's super simple and super intuitive. Instead of using random hex codes that you have no idea what they even mean, you can actually start to think more clearly about the colors that you're using. If it has a small hue, it's probably a warm color. If it has a large hue, it's probably a cool color. And the more colorful it looks, the more saturation it has. And vice versa. The less colorful it looks, the less saturation it has. Similarly in lightness, the brighter it looks, the more lightness it has and the darker it looks, the less lightness it has. So it becomes a lot easier to imagine your colors and to think about them. So that's what HSL colors are and that's why they're so useful and so much better compared to all of the alternative color formats in CSS. Now whether you're coding directly in CSS or you're designing in Figma or Sketch or you're using some website builder like Squarespace or something, whatever you're doing, look for HSL options in your tool. All of these design tools should have HSL options. Look for those options, start using HSL colors, and you'll notice the benefits immediately. It's going to become a lot easier to visualize your colors. Anyway, that's why I love HSL colors. If you like the video, press like. If you want to subscribe, press subscribe. And if you want to work with me, check out my website. Link will be in the description somewhere. Thank you for watching. You can leave now. you