5 Tips To Choose Colour For Data Visualisation

Choosing the chart color is difficult. But when done right, color can really help a lot in data visualization.

Before knowing how to choose the right color, let's learn a little about the HSB color system 😁

What is HSB?

HSB stands for Hue, Saturation, and Brightness.

(don't mistake with HSL, it's a different thing! In this article, let's focus on HSB only)

Let's start from Hue.

To put it simply, Hue is the range of color. This is the first thing you should pick when choosing a color.

It starts at 0° is red to green which is at 120 and then blues at 240 all the way back to 0°, which is red again. So to choose a hue is to choose if this color is going to be redder, bluer, greener, or more blue-red?

Now, let's take a look at the example!

After you understand about hue, then saturation and brightness is easy to understand.

Saturation is just the dullness and the richness of the color itself. The lower the saturation, the grey-er it looks like. Here's an example!

If saturation is how 'grey' a color is, then brightness is how 'black' the color is. The darker it is, the blacker it looks like. Here's an example!

Now that you have understood the color's HSB value, let me teach you the tricks to generate color for your chart!

1. Don't create a very bright and saturated color palette

The high value of brightness and saturation creates a glowing or neon-ish that is very loud and not easy on the eyes. You can still get the same color by choosing a less saturated and less bright version of it.

Data can be big and complex, and the point of data visualization is to simplify and make data easier and pleasant to read. By having a neon-ish color like this in your chart, it makes your data so uncomfortable to read. If you must use a very bright color, make sure it has a proper reason why, such as because you wanted to highlight that particular data.

2. Use color according to its context

What is this graph meant to represent? If it's meant to represent decreasing or increasing value, then it's good to use a color palette with similar/same hues that vary in their brightness and saturation. But it is also important to maintain a good gap of brightness/saturation.

Try not to have too little space between each brightness value (too little space like 10% and 20%, they look too similar and hard to distinguish). To test whether a color is too similar to each other, make the legend of the chart and try to see if it's easily distinguishable or not.

SCMP uses increasingly dark color or same/similar hue to portray the increasingly intensive permafrost melting rate.

And if the function is to present all data as equal, it's best not to use similar colors like above so that they are easy to distinguish and not sending the wrong message to the reader. Try using colors that have pretty different hues just like this chart:

Google's Youtube Studio chart incorporates a nice set of colors that work well with each other. None of the color stands out than the rest because all the data are equally important

3. Keep it simple

It is important to keep it simple, I'd recommend up to 5 colors to make it easily distinguishable and good for the color blind. More than 5 colors would be hard to distinguish and confusing. If some charts can be made without varying colors, then that would be even better. For example, a simple bar chart with just 1 color.

4. Be careful with brightness

A brightness that is way too contrast with the rest is very catchy and may mislead users' attention. For example, if you are making a chart to represent 5 equally important data, all the 5 colors of the legend should have similar brightness. If 1 color is way too bright than the rest, your user might perceive that particular data as the most important, or maybe it will be a bit more difficult to read. To demonstrate, here is an example of a bad color scheme for a chart.

5. Understand the meaning of color and make sure it doesn't clash with your chart's data.

Each color carries its own meaning and has received some connotation within the society or it has some cultural meaning. For example, something pretty widely known is that green is indicated for something good while red is for something bad.

So when choosing the color for your chart, make sure you know what the data supposed to mean and that your color doesn't interfere with your data's meaning.

This way, users can read data at a glance and gets a rough idea of the summary. For example, in the left chart, users have to read the legend to know that they actually have a pretty good portion of satisfied customers. If they don't read the legend, they might think their unsatisfied customer outweighs the satisfied customers!

While on the right donut chart, users can get a summary of the data accurately without reading the legend.

To generate a nice chart color, you can visit some online tools such as this one from the Learn UI Design website!

For references to impressive data visualization, I recommend visiting South China Morning Post's Print Arcade.

Have fun making your charts!

-Leni