skip navigation

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%)
red
0 degrees
yellow
60 degrees
green
120 degrees
cyan
180 degrees
blue
240 degrees
magenta
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.

0
50
50

VS Code extensions

There are various extensions that can change all the colours in a file to HSL such as Hex to HSL.