Colors can make or break your 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 graph visualization less effective and harder to use.
This blog post explores basic color theory, and explains how it can help you design visualizations that look good, and make data more compelling.
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. We’ll use this example to explain further:
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:
Realistically, 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.
You can represent individual datasets in many different ways, and color is just one of the tools available to you. When you’re designing your visual styles, 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 and see whether 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 partisanship in the US House of Representatives. Both the Democrat and Republican parties have established colors – blue and red. These are the hues most likely to be understood by the visualization users 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. Again, ColorBrewer is one of the finest, allowing you to pick 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 visualization. Nice work!
There is one final task you need to do: convert your HSL values to RGB.
Colors in KeyLines can be specified in several formats, including the 17 CSS standard named colors, hexadecimal (or shorthand hexadecimal), and RGB. You can do this conversion using an online tool, or programmatically using a simple JavaScript formula.
We’ve barely scratched the surface of color in this post, but it’s enough to get you started. If you want to learn more, see: