CSS3/Color/HSL
HSL(Hue-Saturation-Lightness)
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
hsl(H,S,L)
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
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
Saturation is represented as percentages. 100% is full saturation, and 0% is a shade of gray.[Example B] - Lightness
Lightness is represented as percentages. 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.[Example B]
- Hue
Example
Example A
Change only the value of Hue. Sets the Saturation=100% and Lightness=50%.
Hue | hsl(H,S,L) | Color | Color Name |
---|---|---|---|
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 |
Example B
Change the values of the Saturation and the Lightness. Sets the Hue=0(red).
Saturation | ||||||
---|---|---|---|---|---|---|
100% | 75% | 50% | 25% | 0% | ||
Lightness | 100% | |||||
88% | ||||||
75% | ||||||
63% | ||||||
50% | ||||||
38% | ||||||
25% | ||||||
13% | ||||||
0% |
CSS Reference
The CSS Color Module Level 3 specification defines the HSL color values in 4.2.4. HSL color values.