HSL: the conceptual model
What color? How much color? How bright?
°
%
%
Using HSL
or
Then use the number controls above to experiment with this model.
- The Hue control (assuming 100% saturation and 50% light) defines pure colors like red █, orange █, yellow █, green █, cyan █, blue █, and magenta █. There are a lot of pure colors: this control gives you 360 selections. Using our mental model from the preceding page, they lie at the edge of the cylinder as illustrated here.
- Pure colors like blue █ are fine, but how do you get an off-color like gray-blue █ to display? For that you need to adjust the percentage of pure color down from 100%. You use the Sat (saturation) control to reduce the percentage of pure blue. You only want some of the light to be the pure blue; the rest is gray filler. The gray-blue in this paragraph is pure blue (hue 240°) with 25% saturation (and 50% light). As the center arrow indicates, the hue is moving toward the center of our mental cylinder model.
- What if you want pink █ to display? Pink is lighter than pure red █; you must add brightness using the Light control. If you want something darker, you can also reduce the Light control to make maroon █. The basic color is the same—red—but the brightness (Light) changes the appearance. (Colors in this paragraph assume that hue=0 and saturation=100%; we're now going up and down the cylinder edge as shown by the outside arrow.)
- Of course, you can vary both saturation and light to produce nearly 10,000 (useful) shades of each hue.
You can work with HSL and RGB models together on our Demo page, and see both models discussed in our Video.
To use the HSL model for Web stylesheets (css), the format is: "hsl(hhh, sss%, lll%)", where "hhh", "sss", and "lll" represent the hue, saturation, and light values that you have set in the controls above.