Specifying Color With HSL

HSL stands for Hue Saturation Luminosity. It is the easiest way I know of to adjust colors when you already know the basic color you prefer.

HSL can be mighty handy for adjusting shades of a color. When you know the hue you want, you can adjust the saturation (how much of the color is in it) and the luminosity (how dark or light the color is) for the best possible result.

The Color Selector for the Color Blind generator can be used to select a hue appropriate for your project.

Let's use blue as the example for this article. With HEX color specification, the color is #0000ff. With RGB color specification, the color is rgb(0,0,255).

With HSL, the color is hsl(240,100%,50%). This is how the color looks on the device where you are viewing this article.

The first number of the hsl color specification is the hue number. A hue can be any number from 0 through 360. For the blue of the example, 240 is the hue number.

For example code, the above is made with CSS background-color:hsl(240,100%,50%); for the background color and color:white; for the text color.

<div style="width:2in; background-color:hsl(240,100%,50%); color:white; font-weight:bold; padding-top:16px; padding-bottom:16px; line-height:100%; text-align:center; font-size:18px;">
hsl(240,100%,50%)
</div>

The second number of the HSL designation specifies the saturation. In the above example, the color saturation is 100%. Let's halve the saturation to 50% to see the result.

Notice the result is a color with less blue in it. The saturation number can be any percentage from 0% through 100%.

The third number specifies the luminosity. In the very first example in this article, the color luminosity is 50%. Let's make two examples, one with luminosity at 25% and one with luminosity at 75%.

Notice the result of the first example is a darker color. It has less luminosity. The second example is a lighter color. It has more luminosity. Luminosity can be any percentage from 0% (which results in black) and 100% (which results in white).

The Color Selector for the Color Blind article features an HSL generator. The generator features comparison swatches for up to four colors.

When the desired hue is known, a wide range of compatible colors can be published by adjusting the saturation and luminosity numbers of the HSL color specification.

(This content first appeared in Possibilities newsletter.)

Will Bontrager