Questions tagged [hsl]

The HSL model describes colors in terms of hue, saturation, and lightness (also called luminance). (Note: the definition of saturation in HSL is substantially different from HSV) The model has two prominent properties:

• The transition from black to a hue to white is symmetric and is controlled solely by increasing lightness

  • Shading and tinting are controlled by a single value, lightness

• Decreasing saturation transitions to a shade of gray dependent on the lightness, thus keeping the overall intensity relatively constant

  • Tones are controlled by a single value, saturation

The properties mentioned above have led to the wide use of HSL, in particular, in the CSS3 color model. As in HSV, hue corresponds directly to the concept of hue in the Color Basics section. The advantages of using hue are

• The relationship between tones around the color circle is easily identified
• Shades, tints, and tones can be generated easily without affecting the hue

http://xahlee.info/js/i/HSL_color_model.png

Lightness combines the concepts of shading and tinting from the Color Basics section. Assuming full saturation, lightness is neutral at the midpoint value, for example 50%, and the hue displays unaltered. As lightness decreases below the midpoint, it has the effect of shading. Zero lightness produces black. As lightness increases above 50%, it has the effect of tinting, and full lightness produces white.

At zero saturation, lightness controls the resulting shade of gray. A value of zero still produces black, and full lightness still produces white. The midpoint value results in the "middle" shade of gray, with an RGB value of (128,128,128).

As saturation decreases, it produces tones of the reference hue that converge on a shade of gray that is determined by the lightness. This keeps the total intensity relatively constant.

Note that the physical nature of additive color prevents the scheme from working exactly except for hues halfway between the primary and secondary hues. However, the total intensity of the tones resulting from decreasing saturation are much closer than tinting alone, as in HSV.