Fun with hsl()

The hsl() colour function in CSS (and, generally, in design) offers a fun approach to colour for someone, who, like me, has historically treated colour as a mixture of red, green, and blue (either with hex values or good ol rgb()).

The big difference is that hsl() (which is short for hue, saturation, lightness) changes colour along a single axis, running from 0 to 360; unlike rgb(), which uses the red axis, green axis, and blue axis to select a hue, saturation, and lightness all at the same time. hsl() uses a colour wheel, instead of three spectra.

The effect of this is that you can do some nifty stuff, programmatically, like adjusting the colour based on the time of day—0 at midnight, 355 at 11:59, ticking slowly round the wheel as the hands travel around the clock.