Chart Colors

Semantic color tokens for data visualization. The categorical palette provides ten distinct, accessible hues for charts, and the trend tokens signal positive, negative, and neutral change. Every token is themeable and can be overridden per instance through Style Books.

Table of Contents

The chart tokens are defined as CSS custom properties on :root and mapped through the frontend token definition, so they resolve automatically in the light, dark, and high-contrast schemes and can be edited in a Style Book without touching the components. Every value meets the WCAG 2.1 AA non-text contrast ratio (3:1) against both the light and dark theme backgrounds.

Categorical Palette

Charts assign these ten colors to series in order. When a chart needs more than ten series, the palette cycles back through the same tokens.

Chart Color 1 (Yellow)
Var
--chart-color-1
Light
#ffd666
Dark
#b88600
Chart Color 2 (Blue)
Var
--chart-color-2
Light
#006eff
Dark
#429aff
Chart Color 3 (Orange)
Var
--chart-color-3
Light
#ffa166
Dark
#8f3700
Chart Color 4 (Teal)
Var
--chart-color-4
Light
#42d7be
Dark
#1b7e6e
Chart Color 5 (Pink)
Var
--chart-color-5
Light
#ff80c8
Dark
#fa008e
Chart Color 6 (Cyan)
Var
--chart-color-6
Light
#66ccff
Dark
#006699
Chart Color 7 (Red)
Var
--chart-color-7
Light
#ff6666
Dark
#f50000
Chart Color 8 (Purple)
Var
--chart-color-8
Light
#bf66ff
Dark
#b54dff
Chart Color 9 (Green)
Var
--chart-color-9
Light
#9de963
Dark
#22430a
Chart Color 10 (Indigo)
Var
--chart-color-10
Light
#b2baff
Dark
#0019fa

Trend Indicators

Trend tokens default to the semantic success, danger, and secondary colors so that positive, negative, and neutral change read consistently with the rest of the theme.

Trend Positive
Var
--chart-trend-positive
Light
#287d3c
Dark
#3bb959
Trend Negative
Var
--chart-trend-negative
Light
#da1414
Dark
#f67474
Trend Neutral
Var
--chart-trend-neutral
Light
#6b6c7e
Dark
#b3b3c6
Edit this page on GitHub

Table of Contents