HSL: the conceptual model
What color? How much color? How bright?
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.
- 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).
- 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%.)
- 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.