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:

• 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;
• Ranges from 0-360 (but normalized to 0-100% in some applications).
• 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;
• Ranges from 0-100%;
• Also sometimes called the "purity" by analogy to the colorimetric quantities excitation purity and colorimetric purity;
• 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.
• Lightness, the Lightness of the color:
• 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:

• 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).
• 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 ColorPicker 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 ColorPicker ActiveX Control also lets you select a color via numeric entry fields.