Design using HSL colour space

When designing any figure with colour, consider the Hue-Saturation-Lightness (HSL) colour space. It is the most intuitive and simplest colour space to work with. For examples of why it is well suited to scientific figures, skip to the bottom. To learn the details, read on.

What is a colour space?

For the purposes of this post, think of a colour space as a way to describe a specific colour with numbers, typically three or four in the range 0–255. For example, red in the Red-Green-Blue (RGB) colour space is (255, 0, 0), whereas a certain orange might be (255, 127, 0). The RGB colour space is used for computer displays because pixels are made up of red, green, and blue subpixels. Another common colour space is Cyan-Magenta-Yellow-Key (CMYK). Printers use specific combinations of cyan, magenta, yellow and black (key) to produce specific colours.

Why not RGB or CMYK?

RGB and CMYK are not intuitive. For example, start with the colour pink. Then think about the colours you would get by adding or removing green. Hard, isn’t it? Or, starting with pink again, what fractions or red, green, and blue would you need to add or remove to produce a darker pink? Evidently, trying to pick colours that are related to each other is challenging with RGB or CMYK. Fortunately, there’s HSL.

How does HSL colour space work?

Hue is effectively colour: e.g. values near 60 are green, values near 160 are blue, etc.

hues
The ‘hue’ component of the HSL colourspace

Saturation describes how washed out a colour is: S = 0 is grey, S = 255 is bright and colourful.

saturation
Varying saturation while keeping hue and lightness constant (H=0, L = 127)

Lightness is self explanatory: L = 0 results in black, L = 255, results in white.

lightness
Varying lightness while keeping hue and saturation constant (H=0, S =255)

How do I actually use it?

Some software may require you to describe your colours as RGB colours. If this is the case, consider

  1. Using Inkscape, which lets you choose and manipulate colours in HSL space while simultaneously giving you the RGB values.

    fill_and_stroke
    Picking colours with Inkscape
  2. Using a converter for the software you are using. For example, if I were using Matlab, I would search for an hsl2rgb converter on the Matlab File Exchange.

Why HSL is suitable for scientific figures

Three simple examples show how HSL colour space is useful for the types of graphs you typically see in science.

markers.png
Varying only the lightness (L) between the marker faces and lines creates a consistent and appealing graph
moving_average.png
When plotting both raw data and its smoothed counterpart, keep H and S constant to reinforce the link between the two lines
swaths
Light swaths are an easy way to represent uncertainty in a line graph

Author: Ken Hughes

Post-doctoral research scientist in physical oceanography

%d bloggers like this: