Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Color palettes

The color palette for data visualizations is a select subset of the IBM Design Language color palette. It is designed to maximize accessibility and harmony within a page.

Resources

Categorical palettes

Categorical (or qualitative) palettes are best when you want to distinguish discrete categories of data that do not have an inherent correlation.

The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.

1 category option 1

Complete default categorical palette in light and dark themes

You can override the categorical sequence with one of the following palettes if the exact number of data categories is predictable.

Light theme alternatives

1-Color
1 category option 1
2-Color
1 category option 1
3-Color
1 category option 1
4-Color
1 category option 1
5-Color
1 category option 1

Dark theme alternatives

1-Color
1 category option 1
2-Color
1 category option 1
3-Color
1 category option 1
4-Color
1 category option 1
5-Color
1 category option 1

Sequential palettes

Monochromatic

The monochromatic palettes are good for relationship charts and trend charts. In light themes, the darkest color denotes the largest values. In dark themes, the lightest color denotes the largest values.

Palette 1
Monochromatic palette 1
Palette 2
Monochromatic palette 2

Diverging palettes

Please note that diverging palettes do not differentiate between light and dark themes.

Palette 1

The red-cyan palette has a natural association with temperature. Use this palette for data representing hot-vs-cold.

Diverging palette 1

Palette 2

The purple-teal palette is good for data with no temperature associations, such as performance, sales, and rates of change.

Diverging palette 2

Alert palette

Alert colors are used to reflect status. Typically, red represents danger or error; orange represents a serious warning; yellow represents a regular warning, and green represents normal or success.

Alert palette

Gradient use

Gradients are good for highlighting extremes in a range of values. Use a gradient on single category visualizations only if needed. Multiple gradients are often inaccessible and are discouraged in our system. Gradients should not be used to represent any meaningful progression or divergence. Never use a gradient in place of a sequential palette.

For the full list of approved gradient options, see the IBM Design Language Color page.

Gradient palette