Get Started Designing Better. Faster. Together. And Free Forever.

Give it a try. Nothing's holding you back.

Finding the right color palettes for data visualizations

4 min read

Good color palettes are easy to come by, but finding the right color palette for data visualizations is challenging.

At Graphiq, things are arguably made even more difficult because we need to convey information across thousands of unique data sets in many different types of visualization layouts.

“Not all color palettes are applicable to charts and data visualizations.”

Current problems

Rather than diving in head-first and creating our own color palette, we started by conducting some research on existing color palettes around the web. Surprisingly, we found that few color palettes are actually designed for complex charts and data visualizations. We identified several reasons as to why we couldn’t use existing color palettes:

Problem 1: Low accessibility
Many of the color palettes we looked at weren’t designed for visualizations. Not only do they not vary enough in brightness, but they often weren’t created with accessibility in mind. Flat UI Colors is one of the most widely used color palettes out there, and it’s easy to see why: it looks great. But, as its name indicates, it’s designed for user interfaces. Those who are color blind may find it difficult to interpret a data visualization that uses the Flat UI palette:

Flat UI Colors in full colors, protanopia mode, and grayscale.

Problem 2: Not enough colors
Another problem: many existing color palettes don’t have enough colors. When we build Graphiq visualizations, we need a palette that offers at least 6 colors, if not 8 to 12 colors, to cover all of our use cases. Most color palettes we looked at didn’t provide enough options.

Problem 3: Hard to distinguish
But wait… there are color palettes that are like gradients, so you could theoretically create any number of colors from that, right?

Unfortunately, there’s often not enough variation in brightness, and many of them would become indistinguishable very quickly, like these (also from Color Hunt):

Let’s just try taking the first one and extending it to a 10 data series:

I’d be surprised if the average user could correctly distinguish the colors in the visualization and match up to the label in the legend, especially among the 4 greens on the left-hand side.

Our approach

At Graphiq, we think, eat, and breathe data, and we invested a lot of time in finding not one, but multiple color palettes that worked for our visualizations. We learned a lot during this process, and we wanted to share 3 rules we’ve discovered for generating flexible color palettes:

Rule 1: Have a wide range in both hue and brightness
To make sure color palettes are extremely accessible and easy to distinguish, they must vary enough in brightness. Differences in brightness are universal. Take any monochromatic color palette and test how it looks in Protanopia, Deuteranopia, and grayscale mode. You’ll quickly be able to tell how accessible this palette is.

“To be extremely accessible, a color palette must vary in brightness.”

Light Blue from Google Material colors in full colors, protanopia mode, and grayscale.

However, having a palette that varies only in brightness may not be enough. The more variance in your color palette, the easier it is for users to map your data series to the visualization. If we can utilize the change in hue for people who are not color blind, it’ll delight them even more.

And for both the brightness and the hue, the wider range you can find, the more data series you can support.

Rule 2: Follow natural patterns of color
There’s a secret that designers know, and it’s not always immediately intuitive to left-brained folks: not all colors are created equal.

From a purely mathematical standpoint, a color progression that transitions from light purple to dark yellow should feel roughly similar to a transition from light yellow to dark purple. But as we can see below, the former feels natural—and the latter, not so much.

This is because we’ve been conditioned by gradients that consistently appear in nature. We see bright yellow transition into dark purple in gorgeous sunsets, but there’s really no place on Earth where you can see a light purple transition into a dark brownish yellow.

Because we see these natural gradients all the time, they feel familiar and pleasant when we see a corresponding palette used in a visualization.

Rule 3: Use a gradient instead of choosing a static set of colorsGradient palettes that incorporate different hues offer the best of both worlds. Whether you need 2 colors or 10 colors, colors can be strategically extracted from these gradients to produce a visualization that feels natural, but also has enough variation in hue and brightness.

It’s not easy to switch to a gradient mindset, but a good way to start is by setting up grid lines at the breakpoints for each number of data series in Photoshop and constantly testing the gradient and making tweaks. Here’s a snapshot of the process we used to perfect our gradients:

As you can see, we place our color palettes at the top against grayscale, tweak the gradient overlays (so we can get the exact transition code later), and select colors from those breakpoints to test how the palette would work in real life.

Our palettes

We’re excited about what we ended up with. Here are some of our color palettes in use. They all begin with pure white and end with pure black to achieve the maximum variation in brightness.

Cool, warm, and neon colors.

TL;DR

While there are an increasing number of good color palettes out there, not all of them are applicable to charts and data visualizations. Our approach to visualization color palettes is to make natural gradients that vary in both hue and brightness. By doing this, our palettes are accessible by people who are color blind, obvious for others, and work with anywhere from one to 12 data series.

Readings, tools, and resources

Along the way, we identified a few great resources and articles that reached similar conclusions as we did, but they take a more mathematical approach and even dive into the color theories. We thought we’d share for further reading:

Samantha is the Design Lead at Graphiq, where she’s responsible for designing the medium in which the company delivers the world’s knowledge. When she's not buried in the codebase, she can be found daydreaming in a hammock, traveling around the world, and working on interesting side projects.