Mandatory LCD Color Lesson
One of the first thing you learn about how pixels on LCD screens work is that almost every color you are looking at is essentially a lie, a visual trick. When you think you see a purple colored button on a light orange background, you’re actually just seeing different concentrations of thousands of Red, Green, and Blue little lights in different strengths which mix together on the way to your eye, which interprets it as that particular hue. Yes, the LCD rainbow is rather boring.
As you probably already know, we can controlling the intensity of those little red, green, and blue subpixels in CSS. In fact, we have 0–255 levels of each subpixel to play with. Yay! If you have ever used any graphic creation tool, this is all old news. If you crank red and green to level 255, you get yellow. If you do the same with red and blue, you get magenta, and blue + green make cyan. If you recognize those colors it’s because cyan, magenta and yellow are the hues of the print world. Fortunately, our eye and brain is pretty good at see things that aren’t really there.
color: rgb(0,255,255); /* cyan */ color: rgb(255,0,255); /* magenta */ color: rgb(255,255,0); /* yellow */
Okay, I digress. I think it’s great to be able to use
rgb(240,13,30) to set a nice candy apple red instead of using a more obtuse hexcode like
#F00D1E (though it’s fun to try to work in hex
1337sp34k into your code). It makes the color more understandable and helps you appreciate the a color is made up of different components. You can also see at glance, without needing to convert from hexadecimal what color something is. In the end, it is a welcome layer of abstraction.
RGB! What the HSL do you mean?
Although RGB is a nice abstraction, we can kick up the abstraction level up to 11 if we switch to HSL. Hue, Saturation, and Light. The HSL color model maps (mostly) to the RGB model but it is based on the classic artists’s tool, the color wheel. The Hue is a radian on the color wheel from 0–360º, the saturation is how rich that hue is, and light essentially controls how washed out that hue is.
> 100% Light will always map to RGB white
#FFFFFF for every color. 0% will always map to RGB black
#000000 for every color. It doesn’t matter what hue or saturation you choose, no light means no color, just like in real life.
So is HSL really better than RGB?
RGB technically has more color fidelity than HSL. On a 24-bit (2²⁴)LCD display, RGB allows us to have 16,777,216 different colors (256 × 256 × 256). HSL only allows 3,492,722 different values (360 × 99 × 98 + black + white). In real-world CSS, this loss of fidelity doesn’t really matter but it’s a good topic to bring up as CSS nerd cocktail parties.
HSL gives you better control over variations of a hue (what many just call the color). This control is really useful when you’re basing a design off of a logo. A logo probably has a dominant color. Let’s say it’s lime green. If there is a specific hue of lime green in your logo, you can easily get lighter and darker versions of that hue while staying in the same general area.
Couple that with the triad or complementary colors on a color wheel and you are you on your way to a harmonious color pallette, using only arithmetic, letting the computer do the calculating.
Constructing an error message
How about a real-world example. Let’s say you want an error message like this:
Oops, you made an error, can you re-read the instruction manual and try again?
Doing something like that is EASY with HSL. IN this case, I just chose hue #5 ( out of 360 ) as my base color and I end up with CSS like this:
background: hsl(5, 100%, 92%); border: 2px solid hsl(5,100%,30%); color: hsl(5, 66%, 16%); padding: 1em; border-radius: 5px;
Once I choose the hue of the background to be a 100% saturated red #5 with lightness of 92%, I simply bring down the Light value to 30% for my border and drop the saturation and Light for my text. Let’s compare that to what those color values would look like in RGB:
background: #ffdad6; border: 2px solid #990d00; color: #44120e;
I’m sure you’ll agree that the HSL values are WAY easier to manipulate and mess around with. As an added bonus, the color picker in Chrome’s development tools will stick to a specific hue, so it’s easy to pick a color in real time.
HSL is a fantastic addition to CSS and now that every browser supports it, why not try it out on your next project?
2 thoughts on “Why I ❤️ HSL more than RGB”
Thanks for the article. Just thought you’d like to know that your comment about rgb being higher fidelity than hsl is incorrect because you can use decimal percentages for saturation and lightness. But you can’t use decimal values for rgb.
eg. (on mac chrome)
hsl(290,60%,70%) = #D185E1
hsl(290,60.5%,70%) = #D284E1
It looks like you can’t have decimal hue values though.
I’m not sure if the hsl values are converted to hex or rgb. You might be maxed out at all possible hex or rgb colors if the hsl value gets rounded to one of those before getting displayed.
But i think it’s fair to say hsl has at least as many colors as rgb, if not more.
You’re absolutely right. Thanks for the comment. I had figured that you could probably use decimal notation for the saturation and light, but opted not to mention it as I think in the majority of cases, the number of colours you can address is more than sufficient. It makes sense that hue wouldn’t be a decimal as it’s essentially just an angle and as long as you have greater fidelity with the other two variables, it wouldn’t matter as much.
I am curious to know if browser support is 100%, though!
As long as we’re still talking about 24-bit color, HSL wouldn’t be able to represent more colors than RGB, but it certainly could match it by using decimals for saturation and light as you mentioned. RGB is a 1:1 relationship to every single possible color available to a 24-bit monitor. From
00000000 00000000 00000000(black) to
11111111 11111111 11111111(white).