Your Friendly Guide to Colors in Data Visualisation

An overview of color tools

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.

image

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.
imageLeft: "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. image

Another tool that’s not only extremely helpful, but also helps me to understand color better is "Colorpicker for data" by Tristen Brown. Here you can design your own gradients. Make sure to make use of the “Visualized” button at the top, which generates a choropleth map with your gradient so that you can see how it might look in use. It’s a shame that the map isn’t on the same page as the color picker, but hey, better than nothing. image

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. image

If you feel like you’ve mastered all these tools and need more, I want hue 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:

image

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.

image

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. image

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: image

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: image

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: image

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: image

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. image

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. image

If you want to examine the colors of your own movie stills or other images you have, tools like the Color Palette Generator by Steven DeGraeve can help. You can upload a photo and automatically create a color palette. As you can see, this palette will turn out far less saturated than you “see” the colors. image

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 and Adobe 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: image

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: image

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: image

2e. Color compositions: Create them yourself

Smashing Magazine provides a good introduction on how to create your very first color palette. I especially like the idea of “creating harmonious grays” by starting with pure grays as a base and then overlaying them with your main color. I’d never thought about it, but it makes a lot of sense as a way to make your color palette feel more harmonious. image

The Smashing Magazine introduction also makes use of Paletton, the more advanced version of Adobe Color CC. If you know what you’re doing, this tool can help a lot: image

3. Fuuuuuuun with Colors

Ok, after all that work, let’s watch a Sesame Street Video by the fabulous OK GO peeps: image

You’ve done that? Let’s play a game. It’s called Color (good name) (do you know that feeling when you’ve heard a word for so many time that it loses its meaning…) and is quite a bit more addictive than I expected. Your goal is to match colors. Go: image

Thanks to all the people who replied to my tweet and helped me discover these treats! 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]. You can also read comments about this article on Hacker News.

We have updated our Privacy Policy to reflect the new EU regulations. Please give it a read (it is written with the goal of clarity) and click here to accept it.