Colours play multiple roles in data visualisation. They can give a visualisation design aesthetics and a certain mood, as discussed in the Colour: the basics module. But in data visualisation, colours are also used to encode data. In this process, data is transformed, following certain rules, into colours on screen or on paper. And colour is also used for creating visual hierarchy in a visualisation. This is discussed in Visual hierarchy module, but here we take a closer look at how to use colour to tell the reader where to look at first in a visualisation.
Chart types like line charts, stacked area and stacked bar charts need colour to tell the categories visualised apart.
Source: Maarten Lambrechts, CC BY 4.0
Other chart types, like scatter plots and bar charts, don’t necessary need colour to distinguish between categories...
In this Gapminder bubble chart, each bubble represents a country. Source: Gapminder
...but they can if needed. This adds an additional dimension to a visualisation.
In this bubble chart, the countries (bubbles) are coloured according to the region they are part of. Source: Gapminder
So, many visualisations use colours to indicate some categorical values (sometimes also called qualitative or nominal values) in the data. What should you consider when picking colours for categorical colour palettes?
First of all, the colours should be different enough, so readers can tell them apart. A simple approach to this is to take the color wheel, and extract colors that are as far apart as possible. For a four colour palette, you can select the “Square” colour harmony in the Adobe Color Wheel, and optionally set the saturation and brightness of the colours to the same values for all the colours (avoid fully saturated colours when you do this):
Set the Color Mode in the bottom left corner to adjust the H(ue) and B(rightness) of the colours. Source: Adobe Color
This palette looks to work fine for different kind of visualisations.
Source: Maarten Lambrechts, CC BY 4.0
When some categories in the data are related to each other, or in other words, you have categories and subcategories in the data, you can consider a “Complementary” colour harmony. Keep the hue for the complementary colours constant, and adjust the saturation and lightness of the colours to make them distinctive enough.
Source: Adobe Color
This palette also looks to work ok.
Source: Maarten Lambrechts, CC BY 4.0
These colour palettes are a good start. But there are other things to consider. Probably the most important one is accessibility: how do people with colour blindness see these colour palettes?