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