ThoughtSpot acquires Mode to define the next generation of collaborative BI >>Learn More

Additional Resources

template

Defining Metrics: A Template 
for Working With Stakeholders

Guide

10 Things Modern Business 
Intelligence Should Enable Today

video

Watch a Product Tour of Mode

Get started with Mode

How to Use Your Brand's Color Palette in Data Visualizations

Image of author
Samantha Novak, Product Design Lead

October 12, 2017

7 minute read

colorstrategy-headline-image

The applications of color theory in business are vast. One of the most useful applications of color theory is the visualization and presentation of data.

Companies typically encounter a challenge when trying to map their brand palettes to data visualizations: analysts and data scientists need to present information using brand colors, while also making the presentation engaging and easily consumable. Unfortunately, when most companies choose their brand colors, they aren't thinking about data presentation. But they still want branded presentations. People grow accustomed to seeing brand colors, so data visualizations in off-brand colors can stick out like a sore thumb. We wanted to share some tips for generating effective and comprehensive palettes within your brand guidelines.

Define Thoughtful, Useful Palettes

Let’s imagine that you’re working on a dashboard that will be shown on monitors all around the sales department. You really only have two or three memorable brand colors to work with, but your chart needs to showcase individual performance for each of the 18 people on your team. Recycling a three-shade palette won't be effective. One color cannot represent four different Account Executives when that information needs to be legible from fifteen feet away. Every time a team member walks by the dashboard, they'll be forced to pause and examine tiny legends or labels to get any kind of insight. That dashboard needs to be useful even for those taking a quick glance while walking past.

So what are your options? A common method to turn few brand colors into many is to progressively decrease saturation and darken the hues.

Darken hues

This quickly results in a muddy, unappealing chart. Another method is to simply generate a large array of random, non-deliberate colors. Maybe you have some tertiary brand colors that don't get used very often, or swatches that you can pull from your product’s interface.

Distinct shades

Even if you manage to find enough distinct shades, there may not be enough contrast between them, and it's unlikely to appear cohesive. None of these options lead to high-impact data visualizations.

To deliver on-brand visualizations with lots of categories, take the time to define a 20-color brand palette. You can keep the simple, pared-down palette for more straightforward visualizations; there’s no need for a single, perfect palette that works on both a chart with two series and one with twenty.

Compare strategies

A great way to generate this larger palette is to use lighter shades of your original colors in between each, to stretch the palette out. Let’s use these five swatches as an example of a primary brand palette. To grow that palette from five shades to ten, we started by duplicating the original five shades. From there, we increased the lightness and adjusted the hue to create enough contrast.

Palette creation

These next sections will give you additional tips on how to expand and order your palettes.

Borrow from Nature

Replicate nature's color patterns when adding and ordering shades into gradients to give them a familiar appearance. For example, look at the two gradients below. A gradient that maps from light yellow to dark purple mimics the pattern of a summer sunset. A color progression that maps the opposite way, from light purple to dark yellow, should feel similar. But it doesn't; this gradient isn't commonly found in nature. When comparing the two side by side, the natural one clearly feels better.

Gradients

This is a result of our subconscious conditioning to gradients that repeatedly appear in nature. A bright yellow or orange transitioning to a cool purple or blue appears in the most stunning of summer evenings. There isn’t a natural example of the reverse.

Sunset

In addition to ordering your palettes to follow a more natural pattern, you can also use nature to inspire more harmonious and analogous palettes. Consider creating mood boards to collect images or photographs that reference colors similar to those in your brand, and look for complimentary shades you can pull from.

Palette from nature

After you have a general sense of what your palette should look like and what colors you want to use, arrange them in a chart preview tool to quickly iterate and reorder your swatches to find the most natural look that works well in your visualizations.

Mode chart tool

Consider Color Symbolism

Red vs green

Humans can experience color in vastly different ways. Every person's unique mix of emotion, mood, cultural, and societal context influences their associations with different colors. But some color combinations have almost universal connotations. Take, for example, red and green. These colors are typically understood to have opposite meanings. One of the most obvious examples worldwide is the standard traffic light, with red and green universally indicating “stop” and “go”. Red is often used to represent caution, danger, or negative or troublesome financial information. However, in branding it can be used to communicate power or confidence. It evokes a passionate and vivid response.

If your primary brand color is red, consider using it for emphasis in visualizations to highlight outliers or features, or as an accent in fonts and details elsewhere in your report theme. For example, If you’re building a dashboard on sales metrics throughout the United States and want the emphasis to be on the Midwest region specifically, try creating a palette using your brand color to represent the Midwest, and shades of gray to represent the remaining regions. Not only does this create brand recognition, it allows you to utilize the benefits of red’s ability to create a focal point to the outlier in the analysis.

Avoid using red to convey positive trends or gains, as this is antithetical to most people's perception of the color. If your company logo is green, a color commonly associated with growth and wealth, you'll want to find a different color for charts that portray the opposite, like customer churn or financial losses.

Dashboard red

Make Visualizations More Accessible

Companies with limited brand colors struggle to visualize a wide variety of categories while keeping those categories distinguishable and easily scannable. There are some common pitfalls you can avoid.

A palette with few colors may provide adequate distinction between adjacent blocks of color in an area chart, but it's unlikely to work for comparisons between thin overlapping lines in a line chart. If you want your palette to be accessible regardless of the shape or proximity of colors, make sure that you’re comparing the values in a variety of sizes and proximities, and that the values can overlap with one another while maintaining contrast. You can determine whether individual shades have enough contrast by testing them in places where visual differentiation is most difficult, such as chart legends and in line charts where multiple series are overlapping.

Palettes are typically created for display on light backgrounds. This poses a problem when a company wants to present data on a dark background, like for a large monitor display. You can easily make a palette more suitable for dark backgrounds by increasing both lightness and saturation.

Another challenging factor when visualizing data is making that visualization accessible to the visually impaired. A great way to test palettes for these problems is Toptal's Color Blind Filter web tools, which can test color schemes or reports for compatibility with various forms of colorblindness.

A great tool for navigating all of these challenges is CIE Lab.

CIE Lab is a three-dimensional color space that helps account for perceptual distances between colors. Take a look at the swatches below. Mathematically, these five shades are interpolated equally. But while looking at them, the first two shades appear to be much closer together. After updating the shades according to CIE Lab, it’s much easier to notice the five distinct swatches.

RGB vs CIE Lab

To use CIE Lab to improve your brand palettes, use its three scales to generate your shades:

L - plot the lightness or luminance from white to black
A - plot the values between red and green
B - plot the values between yellow and blue

CIE Lab scale

Try adjusting your brand shades using these three scales in a color generator that works in CIE Lab. Whether updating the lightness or hue of an existing color or creating new compliments, you can easily tweak the values and save your new corresponding hex value.

CIE Lab sliders

Articles, Tools, and Resources

If you're as excited by the idea of color theory as we are, or if you have the freedom to create palettes that go beyond limited brand colors for your visualizations, there are plenty of amazing articles and resources online that go in-depth into the science behind color. Here are some of our favorites:

Get our weekly data newsletter

Work-related distractions for data enthusiasts.

Additional Resources

template

Defining Metrics: A Template 
for Working With Stakeholders

Guide

10 Things Modern Business 
Intelligence Should Enable Today

video

Watch a Product Tour of Mode

Get started with Mode