HSL (TSL) coding

December 2016

HSL coding

HSL coding

The HSL Model (Hue, Saturation, Luminance), based on the work of painter Albert H.Munsell (who created the Munsell Atlas), is a representation model known as “natural”, that is, close to the physiological perception of color by the human eye. Indeed, the RGB model, however well adapted it may be for the computer representation of colors or for showing them on peripheral display devices, does not allow colors to be selected easily.

Indeed, RGB color adjustment with computer tools is generally done by using three slide blocks or of three cells with the relative values for each primary component, however the lightening of a color requires the respective values of each component to be increased proportionally. Thus, the HSL model was developed in order to overcome this issue with the RGB model.

The HSL Model consists in breaking up the color according to physiological criteria:

  • Hue, corresponding to the perception of the color (mauve or orange T-shirt),
  • Saturation, describing the purity of the color, that is, its sharp or dull character (new or washed-out T-shirt),
  • Luminance, indicating the amount of light of the color, that is, its light or dark appearance (T-shirt in the sun or in the shade).

The following is a graphical representation of the HSL model, in which the color is represented by a chromatic circle and the luminance and saturation are represented by two axes:

Graphic representation of the HSL model

The HSL Model was developed with the aim of allowing fast interactive color selection; however, it is not adapted to the quantitative description of a color.

There are other natural representation models closely related to the HSL model:

  • HSB: Hue, Saturation, Brightness. The brightness describes the perception of the light emitted by a surface.
  • HSV: Hue, Saturation, Value.
  • HSI: Hue, Saturation, Intensity.
  • HCI: Hue, Chrominance, Intensity.

Related :


Código HSL
Código HSL
Le codage HSL (TSL)
Le codage HSL (TSL)
La codifica HSL (TSL)
La codifica HSL (TSL)
A codificação HSL (TSL)
A codificação HSL (TSL)
This document entitled « HSL (TSL) coding » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.