Colors can make or break your data visualization.
A carefully selected color palette helps you to harness the pre-attentive processing powers of the human brain, and makes insight clearer and easier to find. A badly chosen color palette obscures the information your users need to understand, and makes your data visualization less effective and harder to use.
This blog post explores some data visualization examples, basic color theory, and explains how it can help you design visualizations that look good, and make data more compelling.
Let’s start with some examples to show you the importance of choosing the right colors for your visualization.
Here, we can see how choosing different colors makes a big difference.
We’re not big fans of this version, though. It breaks several basic color rules.
Color is a highly subjective topic. Reactions to individual colors will vary between people and cultures. Color theory, on the other hand, is an advanced and evidence-based science that can teach us a lot.
For this blog post, we’ll focus on one color theory concept: the HSL model.
HSL breaks color down into three separate channels: hue, saturation and luminance.
With these three measurable channels, we can start to generate rules for selecting color palettes.
Let’s walk through a step-by-step process for enhancing your visualization with color.
This may be obvious, but your first step is to decide which aspect of your data you want to represent with color.
In a network of email accounts, for example, each node could have multiple attributes:
Only one of these attributes can be tied to color. It is up to you to choose one that your users can understand quickly, and will lend itself to a color scale.
Don’t forget -you can represent data attributes in many different ways. Color is just one of the tools available. Think about color alongside other options like labeling, glyphs, node sizing, edge weighting, etc.
Once you’ve chosen an attribute to apply a color palette to, you need to decide which scale to use. Different scales require different types of palette.
The superb Color Brewer tool defines three types of scale:
Based on the scale you chose in step 2, you can decide how many hues you need in the palette:
Before getting too creative, take a look at your data to see if there’s an obvious set of colors.
Your application or corporate style guide might be a good starting point. If you don’t have one of those, see if there are any color sets your users are likely to understand without a legend.
Take this visualization, for example, looking at weather temperatures. Blue and red are readily understood without any explanation, and are easily distinguishable.
Now you know how many hues are required, you can do the difficult bit: create a palette.
In most cases, your best option is to use one of the many excellent web resources. ColorBrewer is one of the best for picking schemes for sequential, diverging and qualitative data. Or if you have a starting point in mind, Adobe Color creates palettes from a single color.
There are several groups of colors that work well together. You can identify them by their relative positions on the color wheel:
If you decide not to use one of these tools, you should at least follow this basic advice:
By now you should have a beautiful palette of colors for your data visualization. Nice work!
There is one final task you need to do: convert your HSL values to RGB.
We’ve barely scratched the surface of colors in this post, but it’s enough to get you started. If you want to learn more about how to choose colors for data visualization, see:
When you’re ready to get started, request a trial of our graph visualization software.
This post was originally published some time ago. It’s still popular, so we’ve updated it with new example visualizations to keep it useful and relevant.