In this the final part of our look of new color specification use in CSS3 we tackle HLS. Hue-Saturation-Lightness (HSL) is a newly supported color specification in CSS3. Like RGB, HSL is a numerical representation of color with the use of three distinct values, Hue, Saturation and Lightness. ‘Hue is represented as an angle of the color circle’ expressed as a number; hls(120, y, z); Color are expressed in a range of 0-360, with red settling at 0, green at 120, 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'.”

• { color: hsl(0, 100%, 50%) } = red
• { color: hsl(120, 100%, 50%) } = green
• { color: hsl(120, 100%, 50%) } = light green
• { color: hsl(120, 100%, 50%) } = dark green and so fort

The inclusion of HSL as color specification in CSS3 stem from the limitation of RBG. RGB is hardware orientated since they are defined by bit range supported by a monitor and graphics card. RGB does not make a clean transition from screen to print, and RGB forces you to put the colors in a machine-generated way. The HSL specification also supports the alpha. As discussed in prior entries, alpha is acts as a mask specifying ‘how a pixel’s color should be merged with another when they are overlaid, on top of the other.’ The notation is as follows:

• { color: hsla(0, 100%, 50%, 0.5) } = opaque red

HSL is one of many great additions to CSS and we can’t way to make use of them once more browsers adopt the CSS3 specification.