Data Visualization Colors

Categorical Palettes

Categorical palettes arrange our core and accent hues into ordered subtle, regular and high contrast combinations. It’s important to maintain the sequence as indicated in order to achieve intended contrast ratios.
‍
Palettes are provided for up to six categories. Beyond six, humans have a hard time distinguishing between each and the colors become meaningless. If your data requires more categories, consider another way to display or group the data that does not use color as a differentiator.
‍

Accent Hues

Accent hues are useful to indicate outliers and deviations, as well as to create performance comparisons. Warm hues are used to create a sense of alert in comparison to our primary cool palette.

When implementing a high-contrast categorical palette, select one of the following for your accent hue:

Value Palette

Use this spectrum of colors to demonstrate quantitative value across a data set.

Performance Palettes

Red, yellow and green are commonly used to add qualitative value to data visualization. There are two options for showing performance data, both anchored by red & green at opposite ends of the spectrum:

Binary Performance

Use red and green when representing positive and negative values, such as positive and negative rate of return for an investment portfolio. If a progression from positive to negative is needed, use a neutral gray between the two ends.

Performance Spectrum

To indicate a scale of severity from best to worst, use orange, yellow and lime in addition to red and green to create a full spectrum.

Background Colors

Most data visualizations should be on white backgrounds. However, your dashboard design may benefit from the use of dark background colors to bring emphasis or create contrast. Use Navy backgrounds for no more than 20% of a layout.

Specifications

Find all hex codes for the colors noted in the palettes above, in addition to their hover and active interaction values.