Dashboard and Data Visualization Color Palettes

A dashboard uses color in two very different ways at once. The interface around the charts, the navigation, cards, filters and labels, should be quiet. The data inside the charts needs color that's easy to tell apart, carries meaning, and stays readable for everyone, including the many people with a color vision deficiency.

This guide covers how to keep those two layers apart, which kind of chart palette fits which data, how to design status colors that don't depend on telling red from green, and how many colors a chart can take before it stops working.

Calm chrome, colorful data

The most common dashboard mistake is a colorful interface competing with colorful charts. If the sidebar is bright blue, the cards have colored headers and the buttons are orange, the eye has nowhere to rest and the data loses. Keep the chrome almost entirely neutral and let the brand color appear only in small places, such as the active navigation item and the main button.

• Gray page background #F8FAFC with white cards: the cards separate without borders or shadows.
• Gridlines #E2E8F0, only 1.23:1 on white. Gridlines are a reading aid, not data, so they should recede.
• Axis labels and legends #475569: 7.57:1 on white and 7.24:1 on the background.
• Titles and key numbers #0F172A: 17.85:1 on white.

Three kinds of chart palette

The right palette depends on what the data is. Choosing the wrong kind is a bigger problem than choosing the wrong hues.

Categorical: different things

Use a categorical palette when the series are separate groups with no order, such as products, regions or channels. The colors should differ clearly in hue, and no color should look more important than the others unless you mean it to.

These six all pass the 3:1 non-text contrast WCAG asks for in chart elements people need to read. Because they have similar lightness, though, they rely on hue to tell them apart, which is where color-blind readers can struggle. Put the most important comparisons on the blue and orange, a pair that stays distinct for the most common red-green deficiencies, and label lines directly.

A well-known alternative is the palette published by Masataka Okabe and Kei Ito, designed to stay distinguishable for the common forms of color blindness. Its trade-off is contrast on white: its orange #E69F00 is 2.25:1, sky blue #56B4E9 2.30:1 and yellow #F0E442 only 1.32:1, so those fail 3:1 on a light card. Its blue #0072B2 (5.18:1), vermillion #D55E00 (3.86:1), green #009E73 (3.42:1) and reddish purple #CC79A7 (3.06:1) pass.

Sequential: low to high

Use a sequential palette for ordered values that run from low to high, such as a heatmap of activity or a map of population. It's usually one hue running from light to dark, and lightness does the work, so it reads in grayscale and for color-blind readers alike.

The light end of a ramp is close to the background: #EFF6FF is only 1.08:1 on white. That's acceptable for the lowest bin of a heatmap, where the legend explains it, but a lowest value that must stand out needs a cell border or a ramp that starts a step darker.

Diverging: two directions from a midpoint

Use a diverging palette when values run in two directions from a meaningful middle, such as change from last year, above or below target, or a survey scale from disagree to agree. Two hues get darker toward each end, and a light neutral marks the midpoint.

Red and blue is a safer diverging pair than red and green, which many color-blind readers can't separate. The ends, #B2182B at 6.86:1 and #2166AC at 5.89:1 on white, carry strong contrast. The middle steps are meant to be pale, so keep the zero line and labels in the chrome text colors.

Status colors that everyone can read

Good, warning and critical are usually green, amber and red. That's a familiar convention, but red and green are exactly the colors people with the most common forms of color vision deficiency confuse. Color vision deficiency affects about 1 in 12 men and 1 in 200 women of Northern European descent, so on any busy dashboard some readers can't rely on hue. Our guide Designing for Color Blindness covers this in depth; here is how it applies to status.

• Make critical clearly the darkest. The deep red #7F1D1D is 3.04:1 from the green and 3.14:1 from the amber, so it separates by lightness, not only hue.
• Accept that the other two can't also separate by lightness. The green and amber here are only 1.03:1 apart and will look alike to many people with red-green color blindness.
• So give every status a shape and a word: a check for good, a triangle for warning, an octagon or exclamation mark for critical, with a text label.
• In charts, consider blue for good and orange for bad instead of green and red, since blue and orange stay distinct for most color-blind readers.

3:1 for chart marks

WCAG's non-text contrast rule asks for at least 3:1 between the parts of a graphic people need to understand it and the colors next to them. In a chart, that means lines, bars, points and pie slices against the card background. Our guide Color Contrast and WCAG explains the rule itself.

• Check each series color against the card, not the page background, since charts sit on cards.
• Adjacent pie or stacked bar segments don't need 3:1 against each other if you separate them with a thin white gap or direct labels.
• Lines thinner than about two pixels look lighter than their color suggests, so give them some weight.
• If a color must stay light for brand reasons, add a darker outline to the mark or label the values directly.

How many series colors?

Fewer than most dashboards use. People can match a handful of distinct colors to a legend with little effort, but beyond about six or seven series the colors start to look alike, the legend becomes a lookup table, and color-blind readers lose track sooner. When you reach that point, color is no longer the right tool.

• Show the top five or six series and group the rest into Other, in a neutral gray.
• Split one crowded chart into small multiples, a grid of small charts with one series each.
• Label lines and bars directly instead of relying on a legend.
• Keep each category's color the same on every chart on the dashboard.

Highlighting one series

Often the most effective chart uses only one color. Draw every series in a soft gray and the one that matters in the brand color, and the story is obvious at a glance. In the example palettes, a highlight in #2563EB stands out against context lines in #CBD5E1, 3.48:1 apart.

That light gray is only 1.48:1 on white, though, which is fine for context people don't need to read. If readers must still compare the other series, use a darker gray such as #64748B, at 4.75:1 on white, and set the highlight apart with a thicker line and a direct label as well as color.

Dark dashboards

Dashboards shown on wall screens or used for long monitoring sessions often use a dark theme. Swap the chart colors for lighter, softer versions rather than reusing the light-theme ones: on a #0F172A card, a blue #60A5FA reaches 7.02:1, orange #FB923C 7.88:1, teal #2DD4BF 9.59:1, violet #A78BFA 6.56:1, pink #F472B6 6.74:1 and yellow #FACC15 11.65:1.

To build matching light and dark versions of a series color, generate a scale from it and pick a darker step for light cards and a lighter step for dark ones.

See it on a dashboard

The Palette Visualizer includes a dashboard mockup, so you can see your chrome and data colors together before you build. Check that the charts draw the eye first and the interface stays in the background.

For ideas, the Inspiration section includes curated dashboard examples you can browse by category and mood, each with its palette.

Common mistakes

• A colorful interface that competes with the charts.
• A rainbow palette for ordered data, where a sequential ramp would read correctly.
• Red and green as the only difference between good and bad.
• Ten or more series colors in one chart, matched through a legend.
• Light pastel lines on white cards that fail 3:1.
• The same category in different colors on different charts.

Quick checklist

1. The chrome is neutral, and the brand color is used sparingly.
2. Each chart uses the right kind of palette: categorical, sequential or diverging.
3. Chart marks reach 3:1 against the card they sit on.
4. Status colors come with icons and labels, and critical is the darkest.
5. No chart relies on more than about six series colors.
6. Colors are consistent across the dashboard and checked in every theme.