color-system

色彩系统

概览

精心整理的即用型调色板库，涵盖四个领域的浅色和深色方案——Web 应用 UI、营销／落地页、数据可视化和终端／TUI——并提供构建新调色板及验证其无障碍性的配套方法。

核心原则：根据语义角色（背景、文本、主色、错误色……）选择颜色，而不是直接按色相挑选。此处的每个调色板都会将十六进制色值映射到相应角色，因此主题可以灵活切换、保持一致并满足无障碍要求。先选择角色，再查看对应的十六进制色值——在该使用角色的地方硬编码十六进制色值，日后就会破坏主题适配。

导航

下面的索引和角色约定可以独立回答“该选哪个调色板”。只有任务需要具体内容时才加载相应参考文件——无需一次加载全部四个文件。

加载	适用场景
references/carbon.md	构建必须使用 Carbon 的页面或产物时——只需阅读此文件；其中包含 Carbon 在两种模式下的角色、仪表板套件和三色组
references/palettes.md	需要其他调色板的十六进制色值时——涵盖四个领域的浅色和深色方案、填充／微妙／强调三色组，以及 Dusk、Driftwood 和 Meadow 背后的 12 阶色阶
references/contrast.md	验证 WCAG／APCA 阈值、色盲友好性，或排查未通过检查的颜色组合
references/build-your-own.md	库中没有合适的调色板，需要生成新色阶时（OKLCH 配方）
references/theory.md	选择色彩协调方案，或说明颜色空间／色阶选择的依据时

调色板库（快速索引）

适合作为首选的调色板会标注 ⭐；营销和 TUI 没有默认选项，因为具体选择取决于品牌或用户自己的终端主题。

Web 应用 UI — 浅色 + 深色，13 个语义角色，每种颜色各有一个三色组

• Carbon ⭐ (默认) — 深石板蓝，优先适配深色模式。适用于分析仪表板、性能报告和开发工具。附带完整的仪表板套件（A–F 级评分标签、有序阶段序列、行内代码色调、成功高亮）。若浅色模式必须经过精细调校并与深色模式保持一致，可改用 Graphite。
• Graphite — 冷调石板灰 + 蓝色。适用于信息密集的 B2B 仪表板和开发工具；浅色与深色模式的默认方案保持一致。
• Evergreen — 真正的中性锌灰底色搭配翡翠绿品牌色。呈现清新、自信、非蓝色的品牌形象。
• Terracotta — 暖调陶土／浓缩咖啡中性色 + 铁锈色。适用于编辑类产品、内容平台和写作工具。
• Bloom — 柔和的长春花蓝／紫色，深色模式偏深。适用于友好的开发工具和活泼但简洁的应用。
• Teal Slate — 冷调石板灰上的深青色，搭配单一暖色强调色。适用于技术报告、SRE／速率限制仪表板；搭配等宽字体显示数据。

由 12 阶 OKLCH 色阶生成，色阶会与对应角色一同提供，方便扩展或重新推导：

• Dusk — 靛蓝主色、绿松石强调色、近中性的冷灰色。适用于专注工具、编辑器和长时间使用的应用。
• Driftwood — 暖沙色中性色上的深海蓝主色，搭配陶土色强调色。它是唯一在深色模式下会将中性色调转冷的方案。
• Meadow — 柔和的鼠尾草绿主色、古金色强调色、暖调骨白色中性色。风格最柔和；侧重宁静而非自信。

营销／落地页 — 浅色 + 深色，主视觉渐变

• Sunbloom — 精致的珊瑚色／琥珀色暖调。适用于亲和力强的消费品牌／创作者品牌。
• Tidewater — 青绿色／鼠尾草绿。适用于金融科技、健康养生和强调信任的 B2B 品牌。
• Obsidian & Gold — 近黑色 + 金属金。适用于高端、奢侈品和代理机构。
• Paper & Ink — 暖纸色 + 墨黑色 + 一种陶土色强调色。适用于博客、长篇内容和作品集。

数据可视化 — 考虑色盲友好性，采用暖／冷大地色系

• **分类：**Lunar Valley ⭐ (默认) · Hearthstead · Vintage Warm · Glass Wall · Okabe-Ito (对 CVD 安全性有硬性要求时使用)
• **顺序：**Viridis ⭐ (默认) · Magma · Inferno · Plasma · ColorBrewer Blues · YlOrRd (均具备感知均匀性)
• **发散：**Console & Window ⭐ (默认) · Alien Sun · Orchard Dusk · Coffee & Coolant — 均为暖色↔冷色，不使用红色↔绿色

终端 / TUI — 16 个 ANSI 色 + 背景色 / 前景色 / 光标 / 选区

• Solarized Dark · Nord · Catppuccin Mocha · Catppuccin Latte （唯一的浅色方案） · Dracula · Tokyo Night

→ 完整的十六进制色值表： Carbon 见 references/carbon.md，其他所有调色板见 references/palettes.md

语义角色（约定）

UI 调色板为这些角色填充颜色。先将意图映射到角色，再将角色映射到十六进制色值。

角色	含义
background	应用 / 页面基础画布
surface	卡片、面板、底部弹层
surface-elevated	浮起的表面（弹出层、模态框）；在深色模式下，越亮 = 层级越高
border	分隔线、输入框边框、焦点环
text-primary	强调度高的前景色
text-secondary	弱化的标签、提示、说明文字
primary / primary-hover	品牌操作色 + 悬停状态色
accent	次要强调色，与主色不同
success / warning / error / info	语义状态色（按西方惯例分别为绿色 / 琥珀色 / 红色 / 蓝色）

每个带颜色的角色都需要一组三元组，因为一个十六进制色值无法胜任三种用途。 为承载内容而设计的值，不一定能作为文本清晰可读；而在表格密集布局中，实色填充作为徽标背景又太过醒目。

令牌	用途	Bootstrap 5.3 中的名称	Material 3 中的名称
{c}-fill + {c}-on-fill	按钮、激活的筛选标签	--bs-{c} + color-contrast()	primary + on-primary
{c}-subtle + {c}-emphasis	徽标 / 提示框背景 + 标签文字	--bs-{c}-bg-subtle + -text-emphasis	primary-container + on-primary-container
{c}-subtle-border	该背景的边框	--bs-{c}-border-subtle	—
link	在 surface 上显示的品牌色文字	（v6 中拆分）	—

除 Carbon（见 carbon.md）外，所有九种 UI 调色板的现成三元组都在 palettes.md 中。深色模式的填充色采用浅色调，因此标签文字使用调色板中最深的中性色，而不是白色。

数据可视化调色板提供有序的颜色列表（分类色 = 不同的数据系列；顺序色 = 从低到高的渐变；发散色 = 暖色↔冷色，中间为中性色）。TUI 方案提供 16 个 ANSI 色位以及 4 个特殊角色。

核心概念

• 使用 OKLCH 而非 HSL 进行设计。 OKLCH 在感知上具有均匀性；HSL 的“亮度”并不可靠（相同 L 值的蓝色看起来比黄色暗得多），因此即使 HSL 色阶等步长变化，也会显得不均匀。
• 和谐性： 选择一种配色方案（单色 / 类似色 / 互补色 / 三角色……），让一种颜色在饱和度和面积上占主导；其余颜色降低饱和度。
• 色阶： 设置 10–12 个色阶，亮度均匀递增，中间区间的色度达到峰值，并在两端逐渐降低，避免浅色调显得寡淡、深色调显得浑浊。
• 对比度： WCAG AA — 正文文本 ≥ 4.5:1，大号文本和 UI / 边框 ≥ 3:1。
• 浅色模式与深色模式并非反转关系，而 WCAG 2 比率会夸大接近黑色时的对比度。 下方的 Gotchas 介绍了这两种失效情况及其修复方法；阈值和 APCA 操作步骤见 references/contrast.md。
• 色盲友好： 除色相外，还要通过文本、图标或位置来传达含义，因为约 8% 的男性无法仅凭色相区分颜色。发散型数据应使用暖色↔冷色（蓝 / 橙、青绿 / 玫瑰色），而非红色↔绿色。

示例

示例：为 SaaS 仪表板选择颜色

✅ 推荐

User: "I need colors for an admin dashboard, light and dark."
→ Recommend Carbon (deep slate-blue, dark-first, made for dense data UI) — the default;
  offer Graphite if hand-tuned light-mode parity matters more than the dashboard kit.
→ Copy its role→hex table from carbon.md (both modes).
→ Apply by role: background→surface→border→text, primary for the main CTA,
  success/warning/error for status badges. Confirm text-primary on background ≥ 4.5:1.

❌ 反例

→ Pick four hues from a Coolors palette and assign them ad hoc: #2b2d42 nav, #8d99ae text,
  #edf2f4 background, #ef233c buttons. Dark mode = invert the hexes.

有效原因：按角色映射的调色板可以直接用于 CSS 变量，并且天然具备可访问性。临时拼凑的版本缺少中性色阶、层级表面和状态色；反转浅色调色板会产生纯黑表面和褪色的品牌色调（见 Gotchas：浅色模式与深色模式并非反转关系）。

示例：状态徽标颜色

✅ 推荐

.badge-error { background: var(--error); color: #fff; }   /* role, not a hardcoded red */

❌ 反例

.badge-error { background: #ff0000; color: #000; }   /* raw hue; #f00 on #000 ≈ 5.2:1 but glares,
                                                         and won't theme or switch to dark mode */

失败原因：硬编码色相会破坏主题适配和深色模式，而纯红 / 纯黑会导致光晕效应。

示例：选择图表调色板

✅ 推荐做法

Categorical series (≤8) → Lunar Valley (default), or Okabe-Ito when CVD-safety is required.
Continuous low→high → Viridis (perceptually uniform, colorblind-safe).
Signed data with a midpoint → Console & Window (warm↔cool, neutral center).
Past ~8 categorical colors, series stop being distinguishable — aggregate into "Other" instead.

❌ 反面模式

Twelve categorical series colored from the UI palette's success/warning/error/info roles plus
brand tints; profit/loss encoded green↔red with no labels.

为何有效：将数据的结构与合适的调色板类型相匹配，并遵守可区分性限制。反面模式重用了与系列标识冲突的 UI 状态角色，超出了约 8 种色相的限制，并用红色↔绿色进行编码，却没有为色觉障碍者提供文本或图标作为辅助。

易踩的坑

• 现象： 品牌色用作正文文字时难以辨认。原因： 高饱和度的中间色调（琥珀色、珊瑚色、青绿色）在自身背景上的对比度往往达不到 4.5:1——填充色和文字色是同一色阶中不同的步骤。解决方法： 将 fill 和 link 保持为不同的值；把文字色调深，直到对比度达标。在这个库中，只有 Evergreen light 的值不同（#059669 用作按钮标签时对比度为 4.70:1，但用作白色背景上的链接时只有 3.77:1，因此其 link 为 #00875b），这正是容易漏掉这种区分的原因。
• 现象： 状态徽标看起来正确，但在密集表格中显得过于醒目。原因： 在白色文字后使用纯 --error 填充色适合按钮，却远不适合行级徽标。解决方法： 使用 {c}-subtle 背景及其配对的 {c}-emphasis 标签。将状态色调复用于该色调背景上的标签，往往达不到 4.5:1——请从 palettes.md 中取用配对值（Carbon 的值取自 carbon.md），不要凭空假设。
• 现象： 从 12 阶色阶生成的调色板仍无法通过对比度检查。原因： 色阶映射并不能保证对比度。Radix 只保证第 11 阶和第 12 阶相对于第 2 阶达标，其他情况均不保证；第 9 阶很少能为按钮标签提供 4.5:1 对比度，第 8 阶也很少能作为控件边缘达到 3:1。解决方法： 根据这两者各自实际的背景色进行调整。在浅色模式下，确定使用白色标签，并将填充色调得更深——如果以对比度较高的标签色为目标，结果会是虽然达标、却显得无力的浅淡色块。
• 现象： 浅色模式下看起来合适的调色板，在深色模式下显得沉闷。原因： 中性色调只选择了一次，之后便沿用不变。高亮度下看起来像纸张的暖色调，在低亮度下会呈现棕色。解决方法： 针对每种模式重新选择中性色相和色度；在极低色度下转向冷色通常是合适的做法。palettes.md 中的 Driftwood 就采用了这种方法（浅色模式色相为 64，深色模式为 224）；Meadow 的鼠尾草色则不需要这样调整。
• 现象： 从 Color Hunt、Coolors 或趋势文章中复制的调色板无法用于构建界面。原因： 调色板图库通常只有 4 种装饰性色，没有中性色阶、深色文字或状态色——最受欢迎的 30 个 Color Hunt 调色板中，有 16 个无论搭配其中哪两种颜色，都无法提供 4.5:1 的正文文字对比度。解决方法： 将这些色相作为种子颜色，并据此构建色阶（build-your-own.md）；Dusk、Driftwood 和 Meadow 都是这样制作的。
• 现象： 次要／弱化文字（“dimmed”、text-secondary）在设计工具中看起来正常，在应用中却无法通过对比度检查。原因： 组件库自带的弱化文字颜色（例如 Mantine 的 dimmed）是为视觉层次而非对比度调整的，对比度通常约为 3.4:1，远低于 AA 级要求的 4.5:1 下限。解决方法： 参照 contrast.md 选择并验证自己的 text-secondary 十六进制颜色，而不是直接沿用组件库的默认值；并在每种主题下重新检查——同一个覆盖值可能在一种主题下达标，在另一种主题下却不达标。还要在带色调／高层级表面（卡片、条纹行）上重新验证，而不只是检查纯色画布。
• 现象： 深色模式“通过了 WCAG”却仍然难以阅读。原因： WCAG 2 的计算会高估接近黑色时的对比度。解决方法： 用 APCA（Lc）重新检查深色配色，不要只看 4.5:1 比率。
• 现象： 深色主题显得平淡，层级难以辨认。原因： 使用纯 #000 背景，且表面具有相同亮度。解决方法： 将基础色亮度提高到约 #0d1117–#1e1e2e，并让每个层级的表面色都更亮。
• 现象： 色觉障碍用户无法读懂图表。原因： 用红↔绿编码数据，或只靠色相表达含义。解决方法： 换用暖↔冷的发散调色板，并添加标签／图标；类别数据则使用 Okabe-Ito 安全配色（见 palettes.md）。
• 现象： 尽管调色板定义了正确的文字颜色，图表文字的对比度仍然偏低。原因： 图表库（Recharts、Mantine charts）会将坐标轴／图例／数值文字渲染为 SVG，并使用自己的内联 fill，完全绕过你的颜色令牌。解决方法： 直接定位该库的文字元素（例如 .recharts-wrapper text { fill: var(--text) }）——CSS 层叠无法影响这些元素。
• 现象： 某些终端上的 TUI 颜色会消失。原因： 使用硬编码的十六进制颜色，或将关键文字放在亮黑色（槽位 8）中。解决方法： 将语义绑定到 ANSI 槽位 1–6，让用户自己的主题来渲染；槽位 8 只用于弱化显示。
• 现象： 调色板的色阶看起来凹凸不匀。原因： 在 HSL／RGB 中逐级调整亮度。解决方法： 在 OKLCH 中重新构建色阶；参见 build-your-own.md。

集成

• frontend-design — 负责构建组件和布局；此技能负责提供颜色方案。在这里挑选配色方案，然后在那里实现 UI。
• typography — 负责字号、字重和行高；两者仅共用对比度下限。如果文本难以辨认，先判断问题出在颜色搭配（此处）还是字号／字重（typography）。
• dataviz — 负责图表形式、坐标轴和编码。从这里获取分类／顺序／发散配色方案，并将其作为系列颜色交给该技能。