Adobe Logo

Spectrum

Version 2.0.0

Color for data visualization

Color improves a chart’s aesthetic quality, as well as its ability to effectively communicate about its data.

Table of contents#

Options#

Categorical#

Categorical colors help users map non-numeric meaning to objects in a visualization. These are designed to be visually distinct from one another. The Spectrum categorical 6-color palette has been optimized to be distinguishable for users with color vision deficiencies.

Image showing Spectrum's 6 color and a 12 color categorical color palette for data visualization.Image showing Spectrum's 6 color and a 12 color categorical color palette for data visualization.

Sequential#

Sequential colors have numeric meaning. These are a gradation of colors that go from light to dark.

Spectrum supports 5 palettes designed for use with sequential data:

5 key examples of sequential color palettes in both binned and smooth color scales.5 key examples of sequential color palettes in both binned and smooth color scales.

Diverging#

Diverging colors also have numeric meaning. They’re useful when dealing with negative values or ranges that have two extremes with a baseline in the middle. Diverging palettes are a pair of 2 gradations of colors that meet in the center.

Spectrum has 3 palettes designed for use with diverging data:

  • Orange-yellow-seafoam
  • Red-yellow-blue
  • Red-blue
3 key examples of diverging color palettes in both binned and smooth color scales.3 key examples of diverging color palettes in both binned and smooth color scales.

Usage guidelines#

Image showing usage of categorical colors on categorical, ordinal, interval, and ratio scales. Examples include legends showing browser types, sentiment, increments of 5 years from 1995 to 2020, and numbers from -10 to 15.

#

Categorical colors are not ordered. Use these for categorical scales. Do not use these for ordinal, interval, or ratio scales.

Image showing usage of sequential colors on categorical, ordinal, interval, and ratio scales. Examples include legends showing browser types, sentiment, increments of 5 years from 1995 to 2020, and numbers from -10 to 15.

#

Sequential colors are ordered. Use these for ordinal and interval scales. It’s also acceptable to use these for ratio scales. Do not use these for categorical scales.

Image showing usage of diverging colors on categorical, ordinal, interval, and ratio scales. Examples include legends showing browser types, sentiment, increments of 5 years from 1995 to 2020, and numbers from -25 to 25.

#

Diverging colors are ordered. Use these for ordinal and ratio scales, especially when there is a meaningful middle value. These may also be used for interval scales. Do not use these for categorical scales.

Use categorical colors only in certain cases#

Instead of giving each item a categorical color, encode them with a secondary dimension — ideally, one with few values. An exception is when the chart is paired with other charts that use color for the same categories.

Key example of a bar chart correctly using a single color for each category.

Use color to separate items into categories.

Key example of a bar chart incorrectly using a different color for each category.

Don't use color to separate items.

Use up to 6 categorical colors#

It’s best to use fewer than 6 colors in the Spectrum categorical color palette. Categorical colors become more difficult to comprehend starting at 6 colors, and extremely difficult to understand at 12. If you have a need for more than 6 colors, try alternative visual encoding, such as position, which can be easier to read and scales better.

Key example of a stacked bar chart correctly combining like-categories and using only three colors for each group of categories.
Key example of a stacked bar chart incorrectly assigning a unique color to all 9 items.

Don’t use sequential colors with categorical data#

Sequential colors are optimized for numeric meaning. Using these colors for dimensions can undermine the numeric association and lead users to misunderstand visualizations.

Key example of a stacked bar chart correctly using categorical colors for categorical data.
Key example of a stacked bar chart incorrectly using sequential colors for categorical data.

Don’t use categorical or diverging colors with sequential data#

Categorical colors are optimized for maximum differentiation. Using them for sequences (ordinal, interval, or ratio scales), even when arranged by hue, makes it more difficult for users to understand.

Key example of a stacked bar chart correctly using sequential colors with sequential data.
Key example of a stacked bar chart incorrectly using categorical colors with sequential data.

Use darker colors to show larger numbers#

Dark colors can often carry a subconscious association with density. Use a palette that transitions from light to dark as the numbers get larger.

Key example of a sequential legend correctly using a sequential color palette that starts as light yellow for the low numbers and ends in dark purple for the high numbers.
Key example of a sequential legend incorrectly using a sequential color palette that starts as dark purple for the low numbers and ends in light yellow for the high numbers.

Crop diverging colors#

Diverging colors are designed to be balanced from a central midpoint. When the maximum value in your data is not the same distance from the center as your minimum value, alter the palette to reflect those values. It’s best to crop out unneeded colors; don’t distort the palette to make them fit.

Key example of a diverging legend that spans from orange at -50% to light yellow at 0% to dark seafoam green at 400%. The orange has correctly been cropped to end at a light orange rather than showing -50% with a dark orange.

Crop diverging colors.

Key example of a diverging legend that spans from dark orange at -50% to light yellow at 0% to dark seafoam green at 400%. The orange has incorrectly not been cropped to end at a light orange rather than showing -50% with a dark orange.

Don't distort diverging colors.

Be consistent with color across charts#

It’s important to be consistent with color when there are multiple charts in the same view. If a color is used to represent something in one chart, all other charts should echo that relationship.

Key example of multiple charts using consistent colors to represent like-items across separate charts.
Key example of multiple charts incorrectly using inconsistent colors to represent like-items across separate charts.

Resources#

The Viridis Color Palettes

Changelog#

DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Dec 02, 20191.0.0
  • This item has been added to the website