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?