The HSL Model

RGB continues to be the dominant model - supported by all browsers. While it is easy to learn to use an RGB triplet it is difficult to interpret a raw RGB value. The H ue S aturation L uminosity model has been proposed as a more intuitive alternative. HSL now forms part of the CSS3 standard but software support for it still variable. To make matters worse the legal range for H, S and L is not consistent across applications. The ranges described below are those proposed in CSS3.

• Hue refers to the angular location of the desired color on the color wheel - angles are measured in the clockwise direction. In the simplified version of the wheel shown alongside, we have
  • Red at 0°
  • Yellow at 60°
  • Green at 120°
  • Cyan at 180°
  • Blue at 240°
  • Magenta at 300°
• Saturation represents the percentage purity or intensity of the color. As the percentage decreases from 100 the color fades to white.
• Luminosity too is represented as a percentage. It represents the effect of altering the brightness of light shining on the surface in question. A luminosity of 0% corresponds to a surface that is completely in the dark. 50% luminosity represents a normally lit surface while 100% luminosity results in a white surface.