HSL color model

HSL color model

The HSL (Hue, Saturation, Lightness or Luminance) model, also called HLS (Hue, Lightness, Saturation), defines a color space in terms of three constituent components:

bullet Hue, the color type (such as red, blue, or yellow). The hue is the part of the color independent of its brightness or dullness. For example, if we wanted to pick a dark red, we would start with a red hue and then simply make it darker by adjusting the lightness;
   bullet Ranges from 0-360 (but normalized to 0-100% in some applications).
bullet Saturation, the "vibrancy" of the color. Saturation, unlike lightness, determines how "colorful" a color is. A highly saturated color will be vibrant, like fluorescent yellow, whereas a completely desaturated color will be grey;
   bullet Ranges from 0-100%;
   bullet Also sometimes called the "purity" by analogy to the colorimetric quantities excitation purity and colorimetric purity;
   bullet The lower the saturation of a color, the more "grayness" is present and the more faded the color will appear, thus useful to define desaturation as the qualitative inverse of saturation.
bullet Lightness, the Lightness of the color:
   bullet Ranges from 0-100%.

HSL is similar to HSB but better reflects the intuitive notion of "saturation" and "lightness" as two independent parameters, and is therefore more suitable for use by artists. The CSS3 specification from the W3C states, "Advantages of HSL are that it is symmetrical to lightness and darkness (which is not the case with HSB for example)..." This means that:

bullet In HSL, the Saturation component always goes from fully saturated color to the equivalent gray (in HSB, with V at maximum, it goes from saturated color to white, which may be considered counterintuitive).
bullet The Lightness in HSL always spans the entire range from black through the chosen hue to white (in HSB, the V component only goes half that way, from black to the chosen hue).

In out Color Picker ActiveX Control, a hue-based HSL color model is presented to the user in the form of a linear hue chooser and a two-dimensional area (a square) where you can choose saturation and lightness for the selected hue. With this representation, the difference between HSB or HSL is irrelevant. Also out Color Picker ActiveX Control also lets you select a color via numeric entry fields.