# 参考调色板

这是数据可视化方法的**参考实例**：方法需要的每个参数，填入经过验证的默认调色板。技能的其余部分是系统无关的——**要定位到你的品牌，替换此文件的值**并重新运行验证器。无需更改其他任何内容。

## 如何使用这些值

以下所有内容都是纯十六进制。在 HTML 图表中，**将你使用的槽位定义为文件顶部本地 `<style>` 块中的 CSS 自定义属性**，然后按角色引用它们——这样亮/暗值在一个地方交换，图表主体基于角色而非原始十六进制编写：

```css
.viz-root {
  --surface-1:      #fcfcfb;   /* 图表表面 */
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --series-1:       #2a78d6;   /* 分类槽位 1 */
  /* …仅本图表使用的角色 */
}
@media (prefers-color-scheme: dark) {
  .viz-root {
    --surface-1:      #1a1a19;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --series-1:       #3987e5;
  }
}
```

## 分类调色板

两种模式都是选择的。暗色列是相同八个色调为暗表面调整步进的结果，而不是一个单独的调色板：

| 槽位 | 色调 | 亮 | 暗 |
|------|-----|-------|------|
| 1 | 蓝 | `#2a78d6` | `#3987e5` |
| 2 | 浅绿 | `#1baf7a` | `#199e70` |
| 3 | 黄 | `#eda100` | `#c98500` |
| 4 | 绿 | `#008300` | `#008300` |
| 5 | 紫罗兰 | `#4a3aa7` | `#9085e9` |
| 6 | 红 | `#e34948` | `#e66767` |
| 7 | 洋红 | `#e87ba4` | `#d55181` |
| 8 | 橙 | `#eb6834` | `#d95926` |

亮模式最差相邻 CVD ΔE 为 24.2——远高于 ≥12 目标。三个亮模式槽位（浅绿、黄、洋红）在亮表面上低于 3:1 对比度：**减免规则**适用（发布可见直接标签或表格视图）。暗色步进是针对暗色带选择的（OKLCH L ≈ 0.48–0.67，在暗表面上 ≥ 3:1）并作为集合验证——最差相邻 ΔE 10.3，下限带，因此四个或更多系列在暗模式下也依赖直接标签或纹理。

槽位**排序**是 CVD 安全机制，不是装饰性的——它通过枚举排序并选择最大化最小相邻 ΔE 的排序得出（见 `color-formula.md` § 主题）。当你换入你品牌的色调时，做同样的事：在候选排序上运行验证器并保留最佳值。

## 顺序色调

默认单色调：**蓝**，浅→深。当两个顺序上下文同时出现时，第二个取下一个分类槽位的色调（浅绿），每个作为自己的单色调标尺。

| 步进 | 十六进制 | 步进 | 十六进制 | 步进 | 十六进制 | 步进 | 十六进制 |
|---|---|---|---|---|---|---|---|
| 100 | `#cde2fb` | 250 | `#86b6ef` | 400 | `#3987e5` | 550 | `#1c5cab` |
| 150 | `#b7d3f6` | 300 | `#6da7ec` | 450 | `#2a78d6` | 600 | `#184f95` |
| 200 | `#9ec5f4` | 350 | `#5598e7` | 500 | `#256abf` | 650 | `#104281` |
| | | | | | | 700 | `#0d366b` |

完整的 100→700 范围用于**顺序**编码（连续大小——热力图、choropleth），其中最浅步进表示"接近零"并被允许向表面退隐。对于**有序**标尺（离散有序标记——漏斗阶段、层级——使用 `--ordinal` 验证），最接近表面的步进仍必须通过 2:1：在亮模式下，从不浅于**步进 250**（`#86b6ef`，2.06:1）开始；在暗模式下，不深于**步进 600**（`#184f95`，2.15:1）。

## 发散对

**蓝 ↔ 红** — 读起来相反的暖/冷极。中性中点是灰色（亮 `#f0efec`，暗 `#383835`）。每臂等量步进数。（蓝↔浅绿被拒绝——两者都是冷色，中点不读作"空"。）

## 状态调色板（固定——永不是主题化的）

| 角色 | 十六进制 | 亮面对比度 | 暗面对比度 |
|---|---|---|---|
| good | `#0ca30c` | 3.27 | 5.19 |
| warning | `#fab219` | 1.79 | 9.49 |
| serious | `#ec835a` | 2.57 | 6.60 |
| critical | `#d03b3b` | 4.68 | 3.62 |

暗色：相同的四个步进——在暗表面（`#1a1a19`）上全部通过 3:1 且与暗色分类槽位保持区分。在亮表面上，warning 和 serious 设计上低于 3:1；**图标 + 标签**配对是缓解措施，使状态颜色永远不会单独承载含义。这些步进刻意与分类槽位不同，使状态颜色从不会冒充系列。

## 纹理填充（无障碍通道）

一个手绘 **"线条"** 填充，仅在 **45° 和其 135° 镜像**下使用。墨色调底色上（填充自身色阶的一个较深步进）。在值标尺上它是*有序的*（旋转随大小步进；手臂角度承载发散符号）。由无障碍设置、打印或 `forced-colors` 触发——永不是装饰性的，永不是默认打开。

## 表面（用于验证器）

- 亮图表表面：`#fcfcfb`
- 暗图表表面：`#1a1a19`

这些是验证器的内置默认值。**当你换入你自己的调色板时，针对你自己的表面重新运行：** `--surface <your-light> --mode light` 和 `--surface <your-dark> --mode dark`——对比度和带结果仅对图表实际渲染的表面有参考意义。

## 图表装饰和墨迹

| 角色 | 亮 | 暗 |
|---|---|---|
| 图表表面 | `#fcfcfb` | `#1a1a19` |
| 页面平面 | `#f9f9f7` | `#0d0d0d` |
| 主要墨迹 | `#0b0b0b` | `#ffffff` |
| 次要墨迹 | `#52514e` | `#c3c2b7` |
| 柔和（轴/标签） | `#898781` | `#898781` |
| 网格线（细线） | `#e1e0d9` | `#2c2c2a` |
| 基线/轴 | `#c3c2b7` | `#383835` |
| 增量 ↑ 好（成功文本） | `#006300` | `#0ca30c` |
| 边框（细线环） | `rgba(11,11,11,0.10)` | `rgba(255,255,255,0.10)` |

## 筛选控件

筛选器是标准 UI，不是图表组件——图表层仅添加 `interaction.md` 中的组合规则。日期范围控件是预设行列表（今天、最近 7/30/90 天、本月至今），选择以 16px 粗体对勾标记，悬停为幽灵色，自定义范围隐藏在页脚细线后。维度筛选器是标准组合框。

## 字体和数字

所有内容——包括主数字——保持在系统 sans 中：`system-ui, -apple-system, "Segoe UI", sans-serif`。任何地方都不使用展示或衬线字体。大的独立数字（主数字、统计瓦片值）使用默认的比例数字；为必须垂直对齐的列保留 `font-variant-numeric: tabular-nums`（表格行、坐标轴刻度）。在此处替换为你品牌的 UI sans。
