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.

Note: This guidance is a work in progress. To see our roadmap, make feature requests, or contribute, please go to carbon-charts GitHub repository.

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.

01. Purple 706929c4
02. Cyan 501192e8
03. Teal 70005d5d
04. Magenta 709f1853
05. Red 50fa4d56
06. Red 90570408
07. Green 60198038
08. Blue 80002d9c
09. Magenta 50ee538b
10. Yellow 50b28600
11. Teal 50009d9a
12. Cyan 90012749
13. Orange 708a3800
14. Purple 50a56eff

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

Option 1
Purple 706929c4
Option 2
Blue 80002d9c
Option 3
Cyan 501192e8
Option 4
Teal 70005d5d

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.

Option 1
Blue 10edf5ff
Blue 20d0e2ff
Blue 30a6c8ff
Blue 4078a9ff
Blue 504589ff
Blue 600f62fe
Blue 700043ce
Blue 80002d9c
Blue 90001d6c
Blue 100001141
Option 2
Purple 10f6f2ff
Purple 20e8daff
Purple 30d4bbff
Purple 40be95ff
Purple 50a56eff
Purple 608a3ffc
Purple 706929c4
Purple 80491d8b
Purple 9031135e
Purple 1001c0f30
Option 3
Cyan 10e5f6ff
Cyan 20bae6ff
Cyan 3082cfff
Cyan 4033b1ff
Cyan 501192e8
Cyan 600072c3
Cyan 7000539a
Cyan 80003a6d
Cyan 90012749
Cyan 1001c0f30
Option 4
Teal 10d9fbfb
Teal 209ef0f0
Teal 303ddbd9
Teal 4008bdba
Teal 50009d9a
Teal 60007d79
Teal 70005d5d
Teal 80004144
Teal 90022b30
Teal 100081a1c

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.

Palette 2

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

Option 1
Red 80750e13
Red 70a2191f
Red 60da1e28
Red 50fa4d56
Red 40ff8389
Red 30ffb3b8
Red 20ffd7d9
Red 10fff1f1
Cyan 10e5f6ff
Cyan 20bae6ff
Cyan 3082cfff
Cyan 4033b1ff
Cyan 501192e8
Cyan 600072c3
Cyan 7000539a
Cyan 80003a6d
Option 2
Purple 80491d8b
Purple 706929c4
Purple 608a3ffc
Purple 50a56eff
Purple 40be95ff
Purple 30d4bbff
Purple 20e8daff
Purple 10f6f2ff
Teal 10d9fbfb
Teal 209ef0f0
Teal 303ddbd9
Teal 4008bdba
Teal 50009d9a
Teal 60007d79
Teal 70005d5d
Teal 80004144

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.

01. Red 60da1e28
02. Orange 40ff832b
03. Yellow 30f1c21b
04. Green 60198038

Gradient use

Note: Gradients are not yet supported in Carbon Charts. This exploration is subject to change.

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

Color in action

See the IBM Design color palette in action across multiple business units and applications. Deliberate hits of color are composed with rich neutrals for a well-balanced cohesive experience.