图表配色 - Kumo

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

Bar chart — cache status by day (semantic tokens)

分类色板

当数据没有固有倾向性时，请使用分类色板。该色板在设计上让相邻槽位之间保持最大的感知距离，以确保对色觉障碍（CVD）友好，且数据易于区分。

#4290F0

#F5B647

#E8649D

#8D58EE

#50C3B6

#D37536

我们将分类令牌从 16 个（8 个色相 × 2 个明度变体）减少到 5 个，因为大多数图表刻意只同时展示顶部几个类别（通常为 5 个）。当图表需要超过 5 个系列时，应使用取模方式循环这些令牌（color = tokens[i % 5]），以保证样式一致且可预测。

分类配色会通过 CVD 模拟器测试，确保对色觉障碍用户仍然可区分。下面就是分类配色在二型色觉异常（deuteranopia）用户眼中可能的呈现效果。

#4687EE

#DDC74B

#9B9B9A

#0076EB

#A8ACB7

#A69635

Donut chart — traffic by country

Line chart — requests by region

不应该仅靠颜色来传达信息。实现折线图时，请确保在配色色板之上使用图案（如虚线/点线）来区分数据点。由于点与虚线看起来更浅，我们会避免将它们与浅色搭配，因为那些线条可能会淡出。

序列色阶

用于编码密度的 5 级单色相色阶 —— 当单个指标在一组数值上的量级变化需要通过颜色强度加以强化时使用。常见用途：等值区域图（按国家的流量）、热力图和直方图填充。序列色阶不适用于区分分类系列 —— 那种情况请使用分类色板。

浅色模式下，更深的色阶编码更高的数值；深色模式下，更浅的色阶编码更高的数值，从而使最突出的颜色始终对应最高量级。

Step 1

Step 2

Step 3

Step 4

Step 5

#E1EAF4

#8EBCF6

#4290F0

#0E58B4

#03254F

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