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.