HSL Values and Colour Palettes

Monday, April 12, 2021

There are three main ways to choose a colour in CSS: RGB values, HEX values, and HSL values. If our goal was to choose one colour, any of these three ways would work equally well. If, however, we wanted to choose colours that work well together, HSL provides the ‘dials’ we need to make this process much more straightforward.

To use HSL, we require three numbers to pick the colour: hue, saturation, and lightness.

Hue

Imagining a clock’s face, 12 o’clock is 0 degrees and points to red. Going clockwise 120 degrees is green, and going another 120 degrees is blue. Going around the clock with those three landmarks in mind, you can select the ‘colour’ or hue by choosing the corresponding number between 0 and 360. The colours are in the same order as in a rainbow. This clock’s face is called a colour wheel.

Saturation

This is a measure of how much of the hue to display, from 0% to 100%. A complete lack of saturation (0%) is grey, and changing the hue has no impact on the colour. There is less and less greyness as the value increases. A saturation above 85% results in very bold and vibrant colours.

Lightness

Lightness is also measured from 0% to 100%. At 0%, the colour is black, and at 100%, the colour is white, regardless of the other two values. We can initially set the lightness to 50%, and revisit it after deciding on the first two values.

Colour Palettes

There are several ways to choose a set of colours that work well together. Here are three possible palettes:

Monochromatic

For a monochromatic palette, choose the same hue and saturation values for all the colours, and have a variety of lightness values.

Complementary

For complementary colours, choose two colours that are across from each other on the colour wheel. This means their hues are 180 degrees apart.

Tertiary

Tertiary colours are a set of three colours spaced evenly around the wheel. This means the hues of the colours will be 120 degrees apart.