HSL color representation

5 May 2014

Most of us usually use the RGB color model. Its three components indicate, in hexadecimal from 00 to FF, the amount of Red, Green and Blue of a color; but this model can be tricky when it comes to change a color to be more bright, dark, or saturated.

Among the color models that can be used in graphic programs, or even in HTML/CSS, the HSL color representation is one of the most easy to play with. Its components are Hue, Saturation and Lightness:

  • H indicates the Hue, the color itself.
  • S indicates the saturation, i.e. gray, or a powerful color, like background: red, green, or blue.
  • L indicates the lightness, that is, from full black to full white.

This model is graphically represented as a cylinder, where the dimensions are set by the H, S and L values:

The values are ​​given by the following scale:

  • H: 0-360. See the color wheel to know what value matches your color.
  • S: 0-100. 0% is pure grayscale, while 100% is the full-saturated color.
  • L: 0-100. 0% is pure black, 50% the normal color scale as seen in the wheel, and 100% complete white.

With this color model, we can leave the S and L values fixed​​, to play with colors in the same tones. For example, to find a proper background color for a banner, we can desaturate the color a bit and give some lightness, to make it a range of pastel colors that can be adapted to any scenario. With this interactive tool you can change the color leaving the S and L values fixed at 33% and 66% respectively:

Thus, we can set up a template of a main page with a banner on top, with non-obtrusive colors. Here you can play with the HTML, CSS and JS of the template on jsfiddle.net.

Finally, another tool where you can play around with the HSL color model and create beautiful easy-to-change colors for your projects: http://hslpicker.com

Banner sample