Skip Navigation
News & Ideas

Colours for Numbers – Part 1: Designing Colour Palettes for Data Visualization

Illustration of colour wheel and palettes.

As designers, one of the primary techniques we pride ourselves in mastering is crafting colour palettes for our clients’ products. But working with colour becomes more challenging when the product you’re designing is a data visualization platform.

Colourful data visualizations can provide visual excitement in an otherwise traditional user interface. But it’s a delicate balance ensuring that those stimulating visualizations are still doing their core job: communicating the data successfully to the user, in the given context.

In part 2 we will discuss how to design successful data visualizations, but before we do, it’s important to understand how to choose the colours needed to support them.

A quick note about colour

When designers talk about colours for the web, we’ll refer to them by their RGB (red, green, blue) or HEX code (hexadecimal representation of red, green blue) values. However, as soon as we attempt to verbally describe colours themselves we’ll often be discussing their hue, saturation and lightness values instead.

All colours have an associated hue, saturation and lightness (HSL) value. The hue value can be represented in a colour wheel, ranging from 0 to 360 (beginning and ending with the colour red). In this article, we’ll be exploring how we might modify those HSL values to create successful palettes for data visualization.

The different data visualization palettes and when to apply them

Designing a colour palette for data visualization isn’t just one-size-fits-all. The chosen colours need to be flexible for various contexts and chart types. There are three different palette types you need to consider when choosing colours for data visualization: qualitative, sequential and diverging palettes.

Qualitative (categorical) palettes

The first colour palette for consideration is used to represent qualitative or categorical data sets. Categorical palettes require heavy distinction between the colours in the order in which they are presented, and they should still feel visually harmonious.

One way to ensure there is enough distinction between colours is to modify the hue value incrementally and avoid using colours with the same hue. Keep the saturation levels around the same level to ensure the colours still feel harmonious. And then adjust the lightness values to try to achieve as much contrast as possible between the colours.

Step 1 – Select colours by incrementally increasing the hue value

Start at the beginning of the colour wheel and avoid using colours that are often used in your UI palette. For our purposes, we’re going to avoid using red, green and yellow hues.

Qualitative palette - step 1

Step 2 – Rearrange for better contrast where possible

Try to alternate warm and cool colours so that the hues contrast one another as much as possible.

Qualitative palette - step 2

Step 3 – Modify lightness and start prioritizing hues that are harmonious with your UI palette

Now you can start working with these colours and modify their lightness values to achieve even better distinction between them. You may also notice that when you modify the lightness values, it may affect the initial harmony you had established when they were consistent.

In our case, the light teal value became a muddy green colour that didn’t work well in our palette and created some accessibility concerns. Instead, we replaced it with a navy blue that would be used if there is ever an 8th category in a visualization.

Qualitative palette - step 3

 

Note that it’s best practice to use a maximum of only eight colours in your categorical palette, if possible. Any more than eight and you risk introducing hues that are not distinct enough from one another, and your visualizations become too complex.

Sequential palettes

Once you have the colours for your categorical palettes determined, the rest is fairly straight-forward. In a categorical palette, you should avoid using the same hue. But when designing a visualization for sequential data of the same category, using colours with the same hue value makes more sense.

Modify lightness values incrementally

Keep the hue and saturation values the same, while modifying the lightness values incrementally.

Sequential palette - Periwinkle@2x

Sequential palette - Tangerine@2x

Diverging palettes

A diverging scale colour palette is used to represent a contrasting scale that diverges at a specific breakpoint. A good example of this is to think about a temperature gauge. Temperatures below 0 would be cool shades and temperatures above 0 would be warm shades, with a neutral colour in the middle.

Diverging palette example@2x

Combine sequential palettes and include a neutral colour

Leverage alternating sequential palettes to design diverging palettes. Be sure that the two primary hues you select have sufficient enough contrast (usually a warm hue and a cool hue) and are separated by a neutral colour.

Diverging palette@2x

Colours for everyone

While choosing colours for your data visualization palette, remember that a good proportion of your users might have colour vision deficiency (or “colourblindness”), and will have difficulty distinguishing between certain colours — red and green being the most common example of this.

When a designer is faced with designing a data visualization colour palette to support colour vision deficiency (CVD), it can be intimidating but not impossible. With slight modifications to the colours and by maintaining high-contrast ratios between them, CVD-safe palettes can be designed.

Remember the final categorical palette used above? Let’s measure the contrast ratios between colours in the order that they appear to see if the palette passes WCAG AA standards.

Measuring contrast ratios to check against WCAG standards

Great, the categorical palette passes the WCAG AA standard of 3:1 for graphics and user interface components. But how would it hold up in sequential or diverging palettes?

 

Unfortunately, sequential and diverging palettes don’t have sufficient contrast between colours to pass accessibility tests.

Whenever possible, it’s good practice to design a few colour palettes for different CVD types, and allow a user to select their colour palette preferences. If that isn’t possible, it might be worth exploring an alternative treatment to colour altogether, for example borders or line separators between the shades, or even using subtle patterns instead of colours.

Now put your colours to work

Once you’ve designed the colour palettes you need to support your data visualizations, it’s finally time to use them within the context of your product.

In part 2 we will cover some common misuses of data visualization palettes and some best practices on how to make your data visualization designs as successful as possible.


References:
WebAIM: Contrast Checker
https://webaim.org/resources/contrastchecker/