Clock inherits three chart-color systems from upstream Kumo — 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 serve different jobs, so color is not “one-size-fits-all.” To avoid misreading data, choose the color system that matches 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.
The semantic chart colors are derived from Clock’s inherited badge and status tokens so meaning stays consistent across components and contexts. Their hue and chroma are intentionally less aggressive than badge colors 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 |
The inherited palette uses 5 categorical tokens instead of the earlier 16 (8 hues × 2 lightness variants), because most charts intentionally surface only the top categories at once. When a chart needs more than 5 series, cycle the tokens with modulo (color = tokens[i % 5]) for consistent, predictable styling.
Upstream Kumo documented this palette as tested with a CVD simulator. Clock retains that design, but this fork has not published an independent CVD validation report. The example below is a preview of how the colors may appear to someone with deuteranopia, not a compliance certification.
| 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 |