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 |
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.
| 0 | 1 | 2 | 3 | 4 | 5 |
#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.
| 0 | 1 | 2 | 3 | 4 | 5 |
#4687EE | #DDC74B | #9B9B9A | #0076EB | #A8ACB7 | #A69635 |
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 |