The HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models:

• It’s easy to translate from hexadecimal to RGB color codes, but difficult to translate from those color models into HSL.
• Hex and RGB PhotoShop color values can be directly transferred to your CSS, but PhotoShop’s HSB color model is not the same thing as HSL.
• HSL doesn’t give you a greater gamut: it works in the same color range as hex and RGB.

Despite these restrictions, HSL is very much preferred by designers, and I’m about to show you why.

Understanding A New Color System

First, you need a new mental model for color. Forget sliders: instead, focus on the wheel above. You can see red, green and blue: red, at the top, is at 0 degrees, green is at 120 and blue at 240, dividing the color wheel into thirds. Equidistant between those are yellow, cyan and magenta (from the CMYK color system), at 60, 180 and 300 degrees respectively.

Starting at the top of the wheel and moving clockwise, we proceed through the rainbow hues you recall from school: ROY G BIV. An alternative mnemonic is “Young Guys Can Be Messy Rascals” – Yellow, Green, Cyan, Blue, Magenta and Red, starting at 60° and increasing in equal increments.

So the first component of HSL is easy: it’s a specification of how many degrees around on that wheel a particular color is.

As an example, purple is halfway between blue (240°) and magenta (300°), so the HSL code for it would be: hsl(270,100%,50%). (Don’t worry about the other numbers yet). Making the purple “more blue” would move it counter-clockwise on the color wheel, giving us hsl(255,100%,50%).

The next component, saturation, is better described as “intensity”. At the outside edge of the wheel, colors are fully saturated: they are as “colorful” as they can possibly be. Moving inwards, colors get closer to grey. So saturation is “how far away is the color from grey?” Any HSL color with a saturation of 0% is the exact same shade of grey, all other things being equal.

Luminosity, or “brightness”, specifies how far away the color is from black or white. A brightness level of 50% means the color is perfectly balanced between light and dark, and will essentially remain unchanged. Reducing luminosity darkens the color: all HSL colors with a luminosity level of 0 are pure black. Increasing brightness does exactly that: at the extreme of 100%, all HSL colors are white. Between, you have many possibilities, as illustrated below:

With practice, this new mental map of color will become instinctive: you’ll likely find that it is much easier to create and manipulate color specified in HSL in your stylesheet code than hex or RGB. Even if you choose not to use it all the time, HSL has some very specific advantages in certain circumstances, as we’ll see in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.