Chart Colors - Kumo Svelte

Chart colors in Kumo are split into three systems — semantic tokens for data with inherent polarity, a categorical palette for nominal series and a sequential scale for density encoding. Using the right system for the data type is the most important color decision in a chart.

Color systems

Charts in the dashboard serve different jobs, so color is not “one-size-fits-all.” To avoid misreading data, we use different color systems based on the data task.

System

When to use

User task

Examples

Semantic	Data has inherent polarity — good/bad, pass/fail, blocked/allowed	Evaluate	WAF actions, Web Vitals, error rates, TLS versions
Categorical	Nominal categories with no inherent order or polarity	Identify	Countries, URLs, ASNs, worker versions, service names
Sequential	Single metric varying in magnitude — more = darker	Read magnitude	Choropleth maps, heatmaps, bot score histograms

Semantic tokens

Semantic chart colors should be used when the data has inherent polarity, i.e. status, severity and health data. Semantic colors communicate to the user that this data needs their attention and an action might be required.

Semantic chart colors are derived from our existing badge/status semantic tokens so meaning stays consistent across components and contexts. We intentionally adjust hue/chroma for charts to be less visually aggressive than badges to reduce visual fatigue and false urgency.

Attention

Warning

Success

Neutral

Disabled

Skeleton

#FC574A

#F8A054

#00A63E

#B9D6FF

#CBCBCB

#DDDDDD

Bar chart — cache status by day (semantic tokens)

Categorical palette

Use the categorical palette when the data has no inherent polarity. The palette is ordered for maximum perceptual distance between adjacent slots to ensure it's CVD friendly and the data is easily distinguishable.

#4290F0

#F5B647

#E8649D

#8D58EE

#50C3B6

#D37536

We reduced categorical tokens from 16 (8 hues × 2 lightness variants) to 5 because most charts intentionally surface only top categories at once (commonly 5). When a chart needs more than 5 series it should cycle those tokens with modulo (color = tokens[i % 5]) for consistent, predictable styling.

Categorical colors are tested using a CVD simulator to ensure they remain distinguishable for users with color vision deficiency. Here's an example of what the categorical colors might look like to someone with deuteranopia.

#4687EE

#DDC74B

#9B9B9A

#0076EB

#A8ACB7

#A69635

Donut chart — traffic by country

Line chart — requests by region

Color alone should not be used to convey information. When implementing line charts, ensure that you're using patterns (e.g. dashes/dots) on top of the color palette to differentiate between data points. Since dots and dashes appear lighter, we avoid pairing them with light colors since those lines can fade out.

Sequential scale

A 5-step single-hue scale for encoding density — use when a single metric varies in magnitude across a set of values and color intensity should reinforce that magnitude. Common uses: choropleth maps (traffic volume by country), heatmaps, and histogram fills. The sequential scale is not appropriate for categorical series differentiation — use the categorical palette for that.

Darker steps encode higher values in light mode; lighter steps encode higher values in dark mode so the most prominent color always corresponds to the highest magnitude.

Step 1

Step 2

Step 3

Step 4

Step 5

#E1EAF4

#8EBCF6

#4290F0

#0E58B4

#03254F

Heatmap — request density by day and hour (sequential scale)