HSL Colours
HSL
The hsl() colour function is an alternative way to write CSS colour values to hexadecimal numbers like #27a3ff or rgb like rgb(127, 56, 129). It’s become popular because of it’s ease of use in changing colours or setting up groups of colours.
Hue: is the colour or shade measured in rotational values.
Saturation: is the intensity of the colour measured in percentage values.
Lightness: is how light or dark the colour is.
Alpha is an optional fourth value measuring opacity. Can be either from 0 to 1 or as a percentage.
The syntax can use commas but these are no longer necessary. However without commas forward slash is required to separate an alpha value (if there is one) .
The spec used to require hsla when using an alpha value but the a is no longer required.
/* with commas */
color: hsl(50, 22%, 75%, 0.8);
/* without commas */
color: hsl(50 22% 75% / 0.8);
Hue
The hue is based upon the classic colour wheel and the hue values are measured in how far they are around the wheel. With no unit specified this is degrees. Red is at the top at either 0 degrees or 360.
Other units can be used for hue: either degrees (default), radions, gradions, or turns: deg, rad, grad, turn. If not specified then degrees will be used.
| Colour | Position | Hex value | HSL value |
|---|---|---|---|
| red | 0 degrees | #ff0000 | hsl(0, 100%, 50%) |
| yellow | 60 degrees | #ffff00 | hsl(60, 100%, 50%) |
| green | 120 degrees | #00ff00 | hsl(120, 100%, 50%) |
| cyan | 180 degrees | #00ffff | hsl(180, 100%, 50%) |
| blue | 240 degrees | #0000ff | hsl(240, 100%, 50%) |
| magenta | 300 degrees | #ff00ff | hsl(300, 100%, 50%) |
| red | 360 degrees | #ff0000 | hsl(0, 100%, 50%) |
0 degrees
60 degrees
120 degrees
180 degrees
240 degrees
300 degrees
Saturation and Lightness
These are fairly straightforward. Saturation is how rich, intense or saturated a colour is.
Lightness is how light or dark it is. At 0% it is black and at 100% it’s completely white.
VS Code extensions
There are various extensions that can change all the colours in a file to HSL such as Hex to HSL.