Your Friendly Guide to Colors in Data Visualisation

Once upon a time, I tweeted on an urgent matter. “Can somebody tell me how to get better with color?” I wrote.” My color decisions are awful.” I got a lot of replies with links to tools. They were awesome, so I collected them in a blog post. I called it: “Your Friendly Guide to Colors in Data Visualisation“ and hit publish.

That was more than two years ago. Since then, great people have released greater tools, and I can write more confidently about colors. It’s time for an update! I tried to stay as close to the original post as possible and just update screenshots and improve explanations. Here we go:

Why color?

First, watch this video about why color decisions are important and how to mix colors. There are two main aspects to the importance of color: (a) Color lets you set the mood and (b) you can use color to guide the viewer’s eye and draw attention to particular features. Color enables you to tell a story.

Both aspects are important for data visualizations. Pitch Interactive set the mood very effectively in their visualisation on drone strike victims in Pakistan “Out of Sight, Out of Mind”. The red drops make you almost see the blood spread. And color in data vis is often used to set highlights – a very important tool that one can use to guide the viewer’s eye. I like to remind everyone (whether they want to hear it or not) that “grey is the most important color in data vis” referring to this great article by Andy Kirk.
Left: “Out of Sight, Out of Mind” by Pitch Interactive. Right: “Artic Ice Cover” by Derek Watkins, NYT.

So how should you choose colors for your project? In data vis, the way you chose your colors depends on your data. There are two options: For continuous data you use color gradients, and for categorical data you use distinctive colors.

To explain that in a bit more depth: You would use color gradients if you have data that progresses from low to high, e.g unemployment rates on a map. Colors in a gradient should communicate: “I represent a value that’s a bit higher or lower than the color next to me.”

And you would use distinctive colors (e.g. green, yellow, blue – also called “color hues”) when your data has categories, e.g. political parties. They should scream: “I’m by myself and have nothing do to with all these other colors here!”

These two use cases both come with their own challenges. If you work with gradients, your main concern is making sure that the differences between your color steps are large enough. You want your reader to be able to clearly differentiate between a light green and a …lighter green. In the next section of this post, I will introduce and outline some tools which help you solve this problem.

When working with distinctive colors, your mission is to find colors which go well together and attract the reader’s eye. This problem is typical in graphic design circles, so tools in this area are very popular. I will mention some of them in the second part, “Color Compositions”.

1. Color gradients for data visualisation

ColorBrewer 2.0 needs to be mentioned first. It’s a classic. The color tool of color tools for every ambitious data vis designer. It’s not only a tool: While making your choices, it also teaches you about the best use of color in data vis. If you haven’t yet, click on the question marks and read those wonderful explanations.

The Chroma.js Color Scale Helper by Gregor Aisch (now the CTO of Datawrapper) doesn’t only show you the gradients but helps you to identify the differences between the steps – by showing you actual steps. This little tool is the one I use most often. If you’re interested in its background: Gregor also wrote a nice explanation of this tool. More advanced data vis people will appreciate the documentation for Gregor’s tool Chroma.js where you can explore the tool’s functionalities by changing the values directly in the sample code blocks.

If you feel like you’ve mastered all these tools and need more, is the tool for you. It promises “color for data scientists” and is actually so complicated that it even offers tutorials. Definitely not the most easily understandable tool for beginners and I feel it’s overkill for my needs (correct me if I’m wrong). The use of emojis to rate the differentiation between colors is a nice touch, though:

2a. Color combinations: Make sure they work

Having covered gradients, let’s move on to distinctive color hues. Before I show you aaaaall the ways to get inspired for color palettes, let’s keep in mind what they need to deliver.

Viz Palette by Elijah Meeks & Susie Lu is a tool that does just that. It shows you how well your chosen colors work for tiny lines and big areas. It also warns you if any of your colors have the same name (“dark red” & “blue” in our case), which makes it harder to talk about your designs.

Viz Palette also makes it easy to check if your colors can be distinguished by colorblind people. A browser extension like Spectrum, an online tool like Coblis or an app like Sim Daltonism can simulate the colors as seen by people with different types of colorblindness, too. In Datawrapper, we integrated a color blindness simulator, so no external tool is necessary.

2b. Color compositions: Learn from the masters

Of the millions of colors out there, how do you decide on a nice palette of distinctive color hues? When I asked my question on Twitter, three people recommended me painters, so I feel like there is some demand to cover them. To be honest: I appreciate the old masters, and as a Bauhaus University alumna I see the special something you can get from Albers, Itten, and Co. (As an ex Weimar resident I can also see the delight one can get from Goethe’s Theory of Color.) But…you know… the colors they had available back then were different from what we see on our computer screen these days.

Let’s start with Josef Albers and his book “Interaction of Color”. He had things to say like: “In visual perception, a color is almost never seen as it really is – as it physically is.” His color compositions are beautiful indeed:

Another Bauhaus-Star (who was in fact one of Josef Albers’ teachers at the Bauhaus): The crazy Johannes Itten. He wrote the book “The Art of Color” (pdf). He’s most famous for his color spheres, in which he showed colors like this:

Of course, I need to mention the color hero: the American painter Mark Rothko, who is famous for his huge portraits of colors. Rothko said “If you are only moved by color relationships, you are missing the point. I am interested in expressing the big emotions”. Well, I’m definitely moved by his colors:

Coming slowly back to the present day: This Art Palette experiment by Google lets you choose up to five colors and shows you artworks with these colors. You can also upload an image and choose colors from within it. Works really well:

2c. Color compositions: Learn from the movies

Let’s move from art to movies. Shaped by masters of storytelling, this medium knows how to use color to set highlights and influence our mood, lead our eyes and delight us.

You can find color palettes of chosen movie stills on the Twitter account @cinemapalettes or in the blog Movies in Color. The project The Colors of Motion takes a more artistic approach and creates a visual representation of entire films by taking the average color of each frame and stacking them as lines. Not sure if that would ever actually be helpful, but it’s definitely interesting.

One dude who works especially well with colors is Wes Anderson. The blog Wes Anderson Palettes is kind of legendary. There is even an R library inspired by it.

Because of that, it might be helpful to create a palette of the colors as you “see” them in photos or movie stills. An automated approach or color pickers won’t help you much with that; it will always look more greyish than the colors appear. Bill Hart-Davidson suggests using photos of tropical fish as a basis for color palettes, and I can see how this might work very well. That said, tools like DeGraeve’s palette generator are definitely still helpful for art or graphic design work.

2d. Color compositions: Learn from others

There are so, so many color palette collections. ColorHunt, ColorDrop ColourLovers, Coolors, LOLcolors andAdobe Color CC are just some examples of the wide range of collections that color lovers around the globe have created to get their fix. If you want it especially digital and sleek, the color palette for the Material Design by Google will make you happy:

But how are all these color palettes used in practice? The ability to search artwork by color in Designspiration and Dribble can help you answer these questions. The biggest use case for me: Getting inpsiration for additional colors that would go well with your existing palette. Personally, I prefer Designspiration over Dribble, since it lets you not only search for one but multiple colors:

It’s also a great idea to get inspired in a bigger sense: Go to museums and galleries. Look at art. Look at other data visualizations (the winning entries of the “Kantar Information is Beautiful Awards” feature some beautiful colors). Or look at blogs by people who are enthusiastic about color, for example Plenty of Colour:

2e. Color compositions: Create them yourself

3. Fuuuuuuun with Colors

Thanks to all the people who replied to my tweet and helped me discover these treats! I definitely feel more comfortable around colors because of them. Also, let me know about any tools or websites that can’t be missed in this blog post. Find me on Twitter or write me an email: [email protected] .