Frappe UIFrappe UI

Chart Colors

Three ramps every chart draws from. They ship with frappe-ui/charts as --chart-* custom properties, and each has a dark counterpart that keeps a series' hue identity across a theme flip.

Pick a ramp per chart with palette, or hand it an explicit list of colors. Redefine the tokens in your own CSS to rebrand every chart at once.

Categorical

Unrelated series. Ten slots of five hue families, each a dark member followed by its light partner, so five series never repeat a hue. Series pick in order and cycle past the tenth.

1
2
3
4
5
6
7
8
9
10

Sequential

One magnitude, dark to light. The default for axis charts and heatmaps: a single series takes the mid-blue, more take evenly spaced stops.

Diverging

Signed data, cool to warm around a neutral middle. Use it when the reading has a rest point — variance against plan, deviation from a typical week.