HSL: light vs saturation

There are several problems with the RGB notation for colours: There are several other colour schemes possible. Advantages of HSL are: it is symmetrical to lightness and darkness (which is not the case with HSV for example), and it is trivial to convert HSL to RGB.

HSL colours are encoding as a triple (Hue, Saturation, Lightness). Hue is represented as an angle of the colour circle (i.e. the rainbow represented in a circle). By definition Red=0=360, and the other colours are spread around the circle, so Green=120, Blue=240, etc. Saturation and Lightness are represented as percentages. 100% is full saturation, and 0% is a shade of grey. 0% lightness is black, 100% lightness is white, and 50% lightness is 'normal' (see the examples)

So for instance

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colours you want, and then tweak. It is also easier to create sets of matching colours (by keeping the hue the same and varying the lightness/darkness, and saturation)

The examples show how colours encoded with HSL look.

The algorithm to translate HSL to RGB is simple (here expressed in ABC which was used to generate the tables.) In these algorithms, all three values (H, S and L) have been normalised to fractions 0..1:

    HOW TO RETURN hsl.to.rgb(h, s, l): 
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h): 
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

The examples

"RGB is completely useless as a color specification for real people. Almost anything is better; certainly HSL is better. For an explanation of why HSL is better, see our graphics book. Please include HSL in your new specs."
Jim Foley, Author of "Computer Graphics : Principles and Practice"

"The annoying RGB notation is troubling to many users and certainly error prone. I encourage you to adopt a more human-centered solution and HSL seems to be the only candidate for now. The W3C campaign for universal access would be undermined by adoption of only RGB."
Ben Shneiderman, Author of "Designing the User Interface : Strategies for Effective Human-Computer Interaction"

Steven Pemberton
Last modified: Mon Jul 26 22:51:59 CEST 2010