This article was converted from a lecture that I have given at multiple conferences.

For those coming to Data Visualization field from Data Science or Computer Science fields, all colour related stuff might seem like magic – either you have an eye for it or you don’t. And if not, then you just don’t bother too much tweaking those, however still admire someone who manages to make a dashboard look nice. Truly a colour magician!

But at the same time, you see when it is getting bad, albeit you might not know how to fix those colours exactly.

And then there are cases when you don’t see that it’s bad, and this is the reason we have to talk about colour.

Those who are coming from the Design side of things know that there is a thing called Colour Theory, which can get too mathematical at times (video: The Amazing Math Behind Colours). Sometimes it is so precise and straightforward, that you start noticing repeated colour palettes in Hollywood movies (video: Best Uses of Colour in Cinema). However, knowing the ins and outs of how colour works (great link about colours) you spend wayyy too much time tweaking a shade. So, if you know how it works you could just create great-looking reports fast, but no, you create great-looking reports  s l o w l y. What a paradox!

This article will introduce you to just the right amount of colour theory, so you will not have too many things to consider, and you will work faster, but the overall look will definitely improve. If you are excited to slow down yourself, at the end I will give a few links where you will learn significantly too much colour theory for dashboards.

Why do we care about colour anyway

We care about colour because colour dominates the visual perception. If you encode some categorical information on colour and shape – reader will first perceive category based on colour. Colour is immensely powerful in guiding people, so either you use it to your advantage or let it wreak havoc.

The following table from 1986 research summarizes what are the most efficient ways to show categorical values (called Nominal in the table) and colour comes at the second place after position. Position is the Queen, being at the top of all data types. On closer look, there are not so many options to display categories that are common in dashboards – how would you do texture or connection? Some are not even meaningful – length, area, angle – they don’t make sense as categories!

With a thoughtful use of colour, we will bring a few clear benefits to our dashboards. With careful encoding we will bring clarity, it will be immediately clear what represents what. Then, with the right palettes, we will bring flexibility – being able to quickly change what is highlighted, or swiftly colour code an additional category. Finally, a fine colour selection will bring ａｅｓｔｈｅｔｉｃ appeal. Let’s pretend we’re doing pure tech and aren’t concerned with aesthetics, even then, clarity and flexibility are enough by itself to invest some time in learning about colour.

Let’s just agree on some terminology – colour hue is a different colour name: red, blue, yellow. Colour intensity combines saturation, lightness, tint, shade and all the other variations of the same colour hue: light blue, pale blue, dark blue. Let’s not go deeper at this stage!

What is the role of colours in a dashboard

As indicated by the research, colour is the most powerful way to distinguish things from each other, or to encode categories, in other words.

Moreover, since colour is so powerful in guiding people’s attention, we can use it to highlight interesting data points – for example those above or below a certain threshold, those needing the most immediate action. Highlighting is also some kind of categorization – these data points fall into the category “important” while others are “not important”.

It could be possible to use colour as a secondary, redundant encoding. For example, we might want to colour positive and negative bars in a different colour. The position of the bar already tells you which category it belongs, but double encoding it might be easier to read. Sometimes we do redundant encoding for better accessibility, like encoding a marker in a scatterplot both as shape and colour, so even people with sight disabilities could have a way to distinguish them.

Finally, there are not many ways how to display categorical data on a map, a popular choropleth map relies on displaying data as different shades of colour.

These are the main cases where colour could be used on a dashboard. Also, there is one case when colour absolutely should not be used in a dashboard – for the encoding of subtle numerical differences as colour intensities. Why is that? Because colour is prone to optical illusions, and the intensity of a colour might be perceived differently based on surrounding colours.

Even more – when there are subtle differences in areas that do not border – it becomes difficult to distinguish which is bigger and which is smaller.

Let’s stop digging here. For now – let’s define one simple rule – do not use colour as a single way to encode values, unless you have to do it in a map.

My 4-step method of choosing colours for a dashboard

So, we are going to use colour to encode categories and highlight. Which is very frequently needed in dashboards. Follow me in my 4-step method, how I approach this when I start working on a new dashboard. Cleaning a dashboard which was made by someone else is a different kind of beast, but once you get what is the point, you will be able to do that as well.

Step 1. Start with basic

We have to start with something. We have to pick one colour which will be the “main” or default colour. Our options are limited and that is good!

Pick grey. ■ Everything what you display on the screen will be grey, and you will have plenty of area to highlight what is important. Will the dashboard look dull? No! There will be more colours!

Pick the main brand colour. Most companies and projects have brand books. They might even have rudimentary data visualization guides, which might be a good idea not to follow. But the main colour is usually clearly indicated.

Pick secondary brand colour. Sometimes the main colour is not suited for data visualization because it is too bright or aggressive (imagine you make a dashboard for KFC, and it’s all red and black ■■) or maybe too dark, and thus the amount of contrast gets ridiculous. If, for whatever reason, you see that the main colour might not be a good fit, then pick the next colour. It is OK to do that.

If brand colours are problematic or unknown, you can invent the main colour yourself by simply picking a colour from a logo or deducing a colour based on meaning. A dashboard on pineapples might be green or yellow■■. A dashboard on water will be blue■. A dashboard on North Korea will probably be red■.

One note of warning – don’t settle with the most basic colours (like basic “blue” or #0000FF). Drifting a bit off those will be a good improvement. If you have any sliders to adjust it in your software – use them. If the colour is too vibrant, then try to reduce the saturation. If it is too bright – make it darker. If it is too dark – soften a bit. Sometimes it is OK to just mess up with the sliders randomly – maybe you will arrive at something which looks good. In the end, you might even skip the colour if you cannot make it look good. Or in extreme cases – leave the basic colour for highlighting.

Step 2. Add one

Once we have one colour, we might make the whole dashboard with that one colour, just using a few different intensities of that colour for variety. I’m not a fan of that. More colours introduced according to the following step are actually helping users to navigate the report. Minimalistic design is just making things more difficult to use. So, let’s help the users.

Introduce additional colours one by one, instead of adding a bunch of them just in case. If you see you will need two more colours, add two. If now you see a case for only one additional colour, add one. If later you see that you require more, add them later.

There are a few methods how to add additional colour.

1. If grey was not your first choice. Add grey now. Grey is your best friend!

2. Just follow the brand book if one exists, and add colours from there. Probably some designers with designer education got paid for making that brand book, if you don’t trust yourself, trust them.

3. Another method is to make use of a colour wheel. The story is simple here. Find your basic colour on the colour wheel and then select additional colours using one of these strategies:

Complementary  – if you need one colour, pick one from the opposite side of the wheel. This ensures that they look nice together and are well distinguishable.

Split complementary – if you need two or more colours, pick them from the other side of the wheel. The main one will be dominant, the others will be additional.

Triadic – if you need two more colours and don’t want the initial to dominate too much, then draw a triangle on a wheel and pick those at the edges.

Square – if you need three more colours, you can make a square.

Analogous – if you need a few colours and want to keep less colourful ｖｉｂｅｓ, pick colours on a colour wheel that are close to the initial one.

Monochromatic – if you want even less colourful vibes – use only intensities of a single colour. To make them distinct, go from really dark to almost white.

Of course, you can combine these strategies – for example, have monochromatic colours around the initial and one complementary for highlighting. I’m already making this too difficult, let’s keep it simple!

One thing to do after choosing colours – drift a bit from its basic version, as described in the previous section.

You might be confused that there are two types of colour wheel on the internet. The one above is red-green-blue and is used for picking colours for computer displays, it mixes the three colours of pixels to get the full spectrum. Another one is red-yellow-blue, it is used by painters because it is more relevant for mixing paint rather than pixels.

Step 3. Give it a meaning

Now we have one basic colour (I have picked dark cyan ■) and one (or more) additional colours (I have picked desaturated dark cyan ■). A critical step is to attach a meaning to the colour.

The basic colour is the default one, the one for the basic bar chart. And what are we going to do with the additional colour? It might be some category. It might be some specific comparable metric – last year (LY), or budget. It might be used for buttons, or navigation, or decorations. Just make sure that whenever this colour is used, it means the same thing every time.

If at some point you see that more colours are needed – repeat the steps 2 and 3 until you have just enough colours for your dashboard. (I have picked reddish pink for highlighting ■ because it is the complementary colour to cyan)

If you are still tempted to bring plenty of colours (“but I have 15 categories” – people used to tell me) remember that there are only seven colours in a rainbow. Adding more shades will make it difficult to distinguish them. Is this dark cyan or light green ■■? So, no more than seven colours in a dashboard!

Also, keep in mind that people cannot keep more than 7+/-2 objects in their memory (so-called Miller’s Law). This means you simply cannot encode more than 5 different colours (because 7-2=5). So, no more than five colours in a dashboard!

Finally – the more restricted a colour palette is, the more elegant it looks. Therefore, no more than three colours in a dashboard!

Step 4. Stay consistent

You have made some choices. Now, whenever you introduce a new chart to your dashboard or a new page, follow the choices that you have made at step 3 – encode the meanings with the colours you chose and do not add new ones if there is no new category you want to highlight. This will save you time and effort!

Also, this is helpful for people reading your reports – whenever they see a colour other than basic – they will think – I saw this colour before, and I know what it means already.

The key is to make sure similar things look similar and different things look different.

Now you have it

This is it. If you make colour choices based on these simple steps, chances are that your dashboard will look good, will be clear and easy to navigate for most audiences in most cases. Furthermore, it will be easier to work for you, the creator.

I left the accessibility topic out intentionally because the strategy we discussed here will cover most colour related accessibility issues. However, there are more edge cases which need more care and attention. Read about one consideration to improve accessibility in this article (work in progress, link will be available soon). Again – it will be very basic, so basic that it will accelerate your report development instead of slowing it down.

And here are a few ridiculously deep sources about colour choices in data visualization and design in general.

• A long article with links to some other very long articles about colour choices in data vizualization on Datawrapper’s blog
• Colour theory as math (video)
• All colour perception effects are here. You simply cannot avoid them all!