Kumo 的图表颜色分为三套系统——用于具有内在极性数据的语义令牌、用于名义系列的分类调色板，以及用于密度编码的顺序色阶。为数据类型选择正确的系统是图表中最重要的颜色决策。
颜色系统
仪表板中的图表承担不同的职责，所以颜色并非「一刀切」。 为避免误读数据，我们根据数据任务使用不同的颜色系统。
| 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 |
语义令牌
当数据具有内在极性时，即状态、严重程度和健康度数据，应使用语义图表颜色。语义色向用户传达这份数据需要注意、可能需要采取行动。
语义图表颜色派生自我们现有的徽章/状态语义令牌，使含义在不同组件和场景中保持一致。我们有意为图表调整了色相/彩度，使其在视觉上比徽章更柔和，从而减少视觉疲劳和虚假的紧迫感。
| Attention | Warning | Success | Neutral | Disabled | Skeleton |
#FC574A | #F8A054 | #00A63E | #B9D6FF | #CBCBCB | #DDDDDD |
分类调色板
当数据不具有内在极性时，使用分类调色板。调色板的排序保证相邻色位之间有最大的感知距离，确保对色觉缺陷 (CVD) 友好且数据易于区分。
| 0 | 1 | 2 | 3 | 4 | 5 |
#4290F0 | #F5B647 | #E8649D | #8D58EE | #50C3B6 | #D37536 |
我们将分类令牌从 16 个 (8 个色相 × 2 个明度变体) 减少到 5 个，因为大多数图表有意一次只展示最主要的类别 (通常为 5 个)。当图表需要超过 5 个系列时，应通过取模循环使用这些令牌 (color = tokens[i % 5]),以保证样式一致且可预期。
分类颜色经过 CVD 模拟器测试，确保色觉缺陷用户仍能区分。下面是绿色盲 (deuteranopia) 用户看到的分类颜色示例。
| 0 | 1 | 2 | 3 | 4 | 5 |
#4687EE | #DDC74B | #9B9B9A | #0076EB | #A8ACB7 | #A69635 |
不应仅靠颜色传达信息。 实现折线图时，请确保在调色板之上叠加图案 (如虚线/圆点) 来区分数据点。由于圆点和虚线看起来更浅，我们避免将它们与浅色搭配，否则这些线条可能会淡出。
顺序色阶
一个 5 级的单色相色阶，用于编码密度——当某个指标在一组数值间量级不同、 且颜色强度应强化该量级时使用。 常见用途：分级统计地图 (按国家/地区的流量)、热力图和直方图填充。 顺序色阶不适合区分分类系列——那请使用分类调色板。
浅色模式下更深的级别编码更高的值;深色模式下更浅的级别编码更高的值， 使最醒目的颜色始终对应最大的量级。
| Step 1 | Step 2 | Step 3 | Step 4 | Step 5 |
#E1EAF4 | #8EBCF6 | #4290F0 | #0E58B4 | #03254F |