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.
Saturation describes how washed out a colour is: S = 0 is grey, S = 255 is bright and colourful.
Lightness is self explanatory: L = 0 results in black, L = 255, results in white.
How do I actually use it?
Some software may require you to describe your colours as RGB colours. If this is the case, consider
- Using Inkscape, which lets you choose and manipulate colours in HSL space while simultaneously giving you the RGB values.
- 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.
2 thoughts on “Design using HSL colour space”
Comments are closed.