The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).
The format of the HSL Value
The format of an HSL color value in the functional notation is ‘hsl(’ followed by the hue in degrees, saturation and lightness as a percentage, followed by ‘)’.
Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120.[Example A]
Saturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.[Example B]
Lightness is represented as percentages. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.[Example B]
Change only the value of Hue. Sets the Saturation=100% and Lightness=50%.
|0||hsl(0, 100%, 50%)||red|
|60||hsl(60, 100%, 50%)|
|120||hsl(120, 100%, 50%)||green|
|180||hsl(180, 100%, 50%)|
|240||hsl(240, 100%, 50%)||blue|
|300||hsl(300, 100%, 50%)|
|360||hsl(360, 100%, 50%)||red|
Change the values of the Saturation and the Lightness. Sets the Hue=0(red).
The CSS Color Module Level 3 specification defines the HSL color values in 4.2.4. HSL color values.