HSL: light vs saturation

• It is hardware-oriented: it reflects the use of CRT's
• It is oriented to light rather than (what people find more intuitive) print. For instance, yellow is red+green in RGB.
• It is non-intuitive. People can learn how to use RGB, but actually by internalising how to translate Hue, Saturation and Lightness, or something similar, 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

• hsl(0deg, 100%, 50%) is red
• hsl(120deg, 100%, 50%) is green;
• hsl(120deg, 100%, 25%) is dark green;
• hsl(120deg, 100%, 75%) is light green;
• hsl(120deg, 50%, 50%) is pastel green; and so on.

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): 
       SELECT: 
	  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"