Data visualization guidelines

Details about approved color pairings, accessibility guidelines, and pairings to avoid. The data visualization palette can be implemented through our design tokens.

Primary color

We use $color-data-visualization-primary as the main color for data visualization, which is used for showing total value or whenever only 1 color is needed in a visualization.

Primary
#003C96

Semantic colors

Semantic colors are used to indicate positive or negative performance in data. For positive color, we use a slightly darker Matchacado color for text/icons associated with data to make sure text has enough contrast.

Success (Graph)
#008753
Success (Text/Icon)
#005F3E
Error (Graph and Text)
#CC0000

Color pairings

When more than 1 color is needed, colors should be applied in the exact order in the palette to maximize contrast between adjacent colors, in order to help with visual differentiation.

2 colors

Data Visualization 01
#009990
Data Visualization 02
#D86800

3 colors

Data Visualization 01
#009990
Data Visualization 02
#D86800
Data Visualization 03
#6B16CA

4 colors

Data Visualization 01
#009990
Data Visualization 02
#D86800
Data Visualization 03
#6B16CA
Data Visualization 04
#DE2C62

6 colors

Data Visualization 01
#009990
Data Visualization 02
#D86800
Data Visualization 03
#6B16CA
Data Visualization 04
#DE2C62
Data Visualization 05
#003C96
Data Visualization 06
#A42700

8 colors

Data Visualization 01
#009990
Data Visualization 02
#D86800
Data Visualization 03
#6B16CA
Data Visualization 04
#DE2C62
Data Visualization 05
#003C96
Data Visualization 06
#A42700
Data Visualization 07
#0074E8
Data Visualization 08
#DE3700

Pairings to avoid

Although we recommend using colors following the order in the palette, we understand there might be edge cases when we need to pair colors differently. In this case, avoid using the pairings below as neighboring colors. These pairings are hard to tell apart when used:

  • for lines or small points under normal vision
  • for large areas under red-green or yellow-blue color blindness
Data Visualization 04
#DE2C62
Data Visualization 08
#DE3700
Data Visualization 01
#009990
Data Visualization 11
#008753
Data Visualization 02
#D86800
Data Visualization 04
#DE2C62
Data Visualization 03
#6B16CA
Data Visualization 05
#003C96
Data Visualization 08
#DE3700
Data Visualization 11
#008753
Data Visualization 07
#0074E8
Data Visualization 10
#9E68FF
Data Visualization 07
#0074E8
Data Visualization 11
#008753
Data Visualization 04
#DE2C62
Data Visualization 11
#008753
Data Visualization 01
#009990
Data Visualization 04
#DE2C62