visualife/color-palette-designer

颜色调色板设计师

外观良好且通过对比度测试的颜色来自同一个流程：根据情绪选择色相，然后用数学方法固定明度。和谐色轮、60-30-10法则和色彩心理学图表只是没有可用性证据支撑的启发式起点。对比度、克制（一个操作色相）以及一个能从周围环境中脱颖而出的强调色，才是经得起考验的部分。请以此为目标进行构建。

所有数据均来自 scripts/palette.mjs（无依赖的 Node 脚本）。请运行它，而不是手动估算比例或 OKLCH 值；手工计算的对比度错误率很高，足以影响结果（本技能所依据的研究中，多个值误差在 0.05 到 0.15 之间）。

S=<skill-dir>/scripts/palette.mjs
node $S contrast '#767676' '#ffffff'        # 4.54:1, 等级, APCA Lc
node $S oklch '#3F6B4E'                     # 精确 OKLCH
node $S solve '#C0643F' '#FFFFFF' 4.5 darker   # 仅调整 L 直到通过
node $S ramp 155 0.12                       # 50-950 OKLCH 渐变
node $S generate --hue 155 --chroma 0.07 --neutral-hue 95 --accent-offset -110 --format report
node $S generate ... --format css           # 也支持: css-light-dark | json | dtcg
node $S audit sage-wellness                 # 一个精选调色板 ID，或任何 roles.json 文件
node $S presets                             # 面积分割和状态混合预设
node $S ratio 70 25 5 --preset calm         # 验证面积分割（可见区域的百分比）
node $S states sage-wellness --css          # 计算的悬停/激活/禁用/色调混合 + 检查
node $S dark midnight-terminal              # 暗色模式规则 D1-D11 (添加 --light <id|file>, --oled)
node $S cvd '#0072B2' '#D55E00' '#009E73'   # 色盲分离

audit、generate、dark、states 和 ratio 在遇到失败的配对或 FAIL 规则时会以非零状态退出，因此请在向用户展示任何内容之前将它们用作门控。对于暗色模式，generate 和 audit 会自动运行暗色规则。

工作流：从需求到验证过的调色板

1. 解析需求。 品牌色、情绪词、行业、受众（年龄、视力）、模式（亮色、暗色或两者）、合规等级（默认为 AA；针对健康、政府、老年受众的正文使用 AAA）。如果用户只给了感觉，从下面的决策表中选取一个色相，并在一行中说明假设，而不是提问。
2. 选择策略。 默认是带色调的中性色 + 一个主色（+ 可选一个强调色）。单色加语义色是最安全的。仅当需要让 CTA 脱颖而出时使用互补色（隔离效应）。三色和四色方案属于图表和插图，很少用于 UI 界面。
3. 锚定色相和色度。 如果有品牌十六进制色，运行 oklch 并保留其色相。对于 earthy/wellness 风格，将色度上限设为 0.12 左右；对于 vibrant/tech 风格，设为 0.20-0.26。如果没有，选择一个与同类产品中明显不同的色相。
4. 生成。 generate 为每种模式构建中性色、主色、强调色和语义角色，并解决明度问题以满足对比度目标。对于手工构建的调色板，使用 ramp 构建渐变并将步骤映射到角色（见下表）。
5. 验证每一对 使用 audit。如果失败，仅移动明度（使用 solve），绝不移动色相；如果颜色超出 sRGB 范围，则降低色度。在 15 个精选调色板中，每次失败都是一个中等明度、高色度的强调色（OKLCH L 大约在 0.60-0.77）：对于白色文本来说太亮，对于深色文本来说太暗，对于 3:1 对比度来说离白色太近。修复方法：将 L 变暗至 <= 0.55 并使用白色文本，将 L 变亮至 >= 0.72 并使用深色文本，或者将其保留为装饰性并添加边框。
6. 色盲检查 使用 cvd。如果主色、成功色和错误色重叠（在任何模拟下 dE_OK < 0.10），则通过明度将它们分开，并需要图标和标签，因为仅凭色相无法传达意义（WCAG 1.4.1）。
7. APCA 为建议性。 WCAG 3 尚未采用对比度算法（2026 年 9 月的工作草案表示仍有待确定），因此 WCAG 2.2 决定通过/失败。将 APCA Lc 报告为警告：正文低于 |Lc| 75 是细的（常见于暗色模式）；低于 15 则不可见。
8. 使用 states 定义状态，而不是手动。 悬停和激活百分比取决于调色板：平坦预设百分比导致在我们测量的 45 个调色板/预设组合中，有 37 个至少有一个状态步骤低于 dL 0.03（几乎不可见），其中仅悬停步骤就有 26 个。node $S states <palette> --preset standard --css 解决混合百分比和方向（朝向文本/背景中能使 on-primary 保持可读的那个），检查每个状态的对比度，并发出 color-mix(in oklab, ...) 变量；generate --format css --states standard 将它们添加到每个模式。已禁用：向背景混合，加一个非颜色提示。焦点：2px 环，偏移 2px，与背景的对比度 >= 3:1。已选和已访问需要非颜色提示。
9. 选择比例（见下面的“百分比规则”），并在交付说明中说明预设。
10. 输出 角色表（十六进制 + 精确 OKLCH）、通过/失败表、CSS 自定义属性，以及可选的 Tailwind v4 @theme 或 DTCG JSON。将理由标注为惯例或证据（参见 references/evidence-and-conventions.md），以便生成的副本不再重复色彩心理学传说。
11. 展示它。 提供或构建演示页面（见下文），以便用户在实际布局中评判调色板，而不是色板网格。

角色契约

每个调色板都为每个受支持的模式定义这些角色。组件使用角色，从不使用原始十六进制色。

角色	用途	最低要求
bg, surface, surface-2	画布、卡片、凸起面板	可区分（OKLCH dL >= ~0.03）
border	装饰性分隔线	无
border-strong	输入轮廓、控件	3:1 对 bg (SC 1.4.11)
text	正文	4.5:1 对 bg 和 surfaces（目标 7+）
text-muted	次要文本	4.5:1 对 bg 和 surfaces
primary / on-primary	主要操作填充 / 其上的文本	填充 3:1 对 bg，链接文本 4.5:1；文本对填充 4.5:1
accent / on-accent	可选的第二个色相	如果它承载意义，与 primary 相同
success warning error info	状态文本和图标	4.5:1 对 bg；绝不只有颜色
focus-ring	键盘焦点	3:1 对比相邻颜色

渐变到角色映射（50-950 刻度）：亮色 bg 50 或白色，surface 白色/50，surface-2 100，border 200，border-strong 500，text 900-950，text-muted 600，primary 600-700，on-primary 白色，focus primary-600。暗色：bg 950（或 900），surface 900，surface-2 800，border 800，border-strong 600，text 50-100，text-muted 400，primary 300-400，on-primary 950，focus primary-300。将映射视为初步猜测，让 audit 做出最终决定。

硬性规则（默认 WCAG 2.2 AA，除非要求 AAA）

• 文本 4.5:1；大文本（>= 24px，或 >= 18.66px 粗体）3:1；UI 组件和有意义的图形 3:1（SC 1.4.11）；AAA 要求文本 7:1，大文本 4.5:1。
• 装饰性边框可以很淡，但作为字段唯一提示的输入轮廓必须达到 3:1。1.3:1 的“优雅”输入边框是失败的。
• 颜色绝不单独承载意义。为正文链接添加下划线，或者使其与周围文本达到 3:1 对比度并添加悬停/焦点提示；错误使用图标和消息；图表系列使用直接标签或形状。
• 有色调背景会改变计算。为白色调校的语义色在暖色纸张背景上会降至大约 4.4:1；在真实背景上运行 audit，而不是在白色上。
• 渐变和照片上的对比度必须在最差点（最亮和最暗区域）保持有效，或者添加遮罩层。

详细信息、公式、色盲安全集 (Okabe-Ito) 和 APCA 阈值：references/accessibility.md。

在 OKLCH 中工作

• 使用 oklch(L C H) 作为事实来源。L 是感知明度（0-1），因此相同 L 的颜色看起来确实一样亮；在 HSL 中，50% 的黄色和 50% 的蓝色差异巨大。在 OKLCH 中旋转色相会保持明度，这就是为什么和谐偏移在那里有效而在 HSL 中无效。
• 使用非常低色度的品牌色色调来着色中性色：在白色附近大约 0.005-0.015，在暗色中 0.01-0.045。暖色调中性色（色相 60-100）适合健康、食品、编辑；冷色调（240-270）适合 SaaS、金融、开发工具。避免在着色的中性色旁边出现杂散的纯灰色。
• 渐变目标：步骤 50-950 的 L 值为 0.985, 0.967, 0.928, 0.872, 0.707, 0.554, 0.446, 0.372, 0.279, 0.208, 0.129，色度在两端逐渐递减。通过降低色度而不是剪切来进行色域映射；浏览器会粗暴地剪切。
• 渐变：在 in oklab 或 in oklch 中插值以避免灰色浑浊的中间点；避免接近零色度的全视口暗色渐变（条纹），或添加细微噪点。
• 支持情况（2026 年底）：oklch() 自 2023 年起成为基准；color-mix() 自 2025 年 11 月起广泛可用；Chrome 122+、Firefox 128+、Safari 18+ 支持相对颜色语法；light-dark() 将于 2026 年 11 月 13 日达到广泛可用。作为默认输出，发送带有 prefers-color-scheme 加 [data-theme] 覆盖的纯自定义属性；提供 light-dark() 作为紧凑替代方案。在相对颜色语法中，l 的取值范围是 0-1。

决策表：需求到策略

需求信号	中性色	主色	强调色	模式	目标
健康、有机、水疗、茶	暖色，H 70-100, C 0.008-0.02	鼠尾草/苔藓/蓝绿色，C 0.05-0.10, L ~0.50	类似色或大地色互补（赤陶、黏土）	亮色	AA，正文首选 7:1
电商	中性/暖色，C <= 0.01	品牌色	孤立 CTA 色相，其他地方不使用	亮色	AA
SaaS / B2B	冷色，H 250-270, C 0.01-0.04	蓝色/靛蓝/紫色	单色 + 语义色	亮色 + 暗色	AA
开发工具	冷色或纯灰色	蓝色/紫色/绿色，暗色 L 0.70-0.80	单色；语法色仅用于代码	暗色优先 + 亮色	AA，检查 APCA
机构 / 作品集	米白色纸张或接近黑色	黑色/白色	一个电光强调色，如果达不到 3:1 则添加边框	任一种	AA
金融	冷色海军蓝	海军蓝/蓝色	用 +/- 和箭头表示涨跌	亮色（+ 暗色）	AA，数字需要 AAA
健康	冷色中性	蓝绿色/蓝色	平静绿色	亮色	AAA 正文
儿童 / 创作者	暖色奶油	饱和紫色/蓝色	三色系，每个 <= 10% 面积	亮色	AA

起点：references/palettes.md（15 个经过验证的调色板，包含 CSS、OKLCH 和通过/失败表）。选择最接近的一个，调整色相和色度，重新运行 audit。

百分比规则和预设

面积分割是面积预算，不是法律：60-30-10 是室内设计惯例，没有可用性研究支持确切数字，但小的强调色份额保护了这里唯一有研究支持的效果（CTA 只有在它的色相罕见时才会突出）。份额是可见背景区域的百分比（不计入文本墨水）。使用 ratio 检查分割；使用 scripts/measure-area.js 测量真实页面，而不是猜测。

预设	分割 n-s-a	用途
classic	60-30-10	电商和 SaaS 营销，通用默认值
calm	70-25-5	健康、金融、编辑
dense-app	80-17-3	仪表盘、管理后台、开发工具（亮色或暗色）
product-first	80-15-5	目录，照片承载颜色；一个孤立的 CTA 色相
editorial	70-27-3	野兽派/编辑：边框和墨水完成工作
dark-showcase	70-22-8	暗色作品集/机构，带一个鲜艳的强调色
bold-brand	50-30-20	创作者、活动、儿童：强调色可能引领

规则：份额总和为 100（FAIL）；中性色份额最大，>= 45；强调色保持在预设范围内（饱和渐变和品牌叠加计为强调色）；主色面积 >= 强调色面积的 70%，以便一个操作色相主导；语义色在静态状态下 <= 2%；暗色主题保持中性色 >= 70。状态预设（subtle 8/14/50, standard 12/20/60, strong 16/26/70 作为悬停/激活/禁用的最低百分比，色调 8/10/14）由 states 根据调色板提高，直到步骤可见。范围、规则 A1-A7 和 S1-S6、方向逻辑和测量代码片段：references/proportions-and-states.md。

暗色模式

暗色主题是第二个调色板，绝不是反转。引擎强制执行可测量的规则（node $S dark ...，generate 和 audit 也会运行）；其余是需要手动应用的实现规则。包含阈值和修复的完整表格：references/dark-mode-rules.md。

可测量的（FAIL 阻止；WARN 需要说明原因）：

• D1 背景不是纯黑：OKLCH L 0.13-0.24（仅为声明的 OLED 变体使用真正的 #000）。
• D2 文本不是纯白：L 0.88-0.95。D3 文本/背景 <= 17:1。
• D4 通过明度提升层次：背景 < 表面 < 表面-2，每个步骤大约 +0.04 L；阴影在暗色上不提升层次。
• D5 中性色着色，背景色度 <= 0.045。
• D6 主色要么是亮色填充（L >= 0.70）配深色 on-primary，要么是深色填充（L <= 0.58）配白色 on-primary；0.58-0.68 区间是死区。填充需要与背景和表面达到 3:1 对比度。
• D7 相对于亮色主题：相同色相（偏差在 10 度以内），更亮，色度不高（减少 10-30%）。
• D8 状态色针对暗色重新调校：与背景和凸起表面达到 4.5:1，带图标和文本。
• D9 border-strong 3:1；装饰性边框仍可见（dL >= 0.05）。D11 焦点环 3:1。
• D10 APCA 建议：文本 |Lc| >= 75，次要文本 >= 45（目标 60）；暗色极性暴露了 WCAG 2 通过的细文本。

手动：绝不使用 filter: invert（N1）；在悬停时变亮而不是变暗（N3）；无 alpha 文本（N4）；调暗明亮照片并发送亮色/单色 logo 变体（N5）；避免小的细字体（N6）；设置 color-scheme 和每个方案 theme-color（N8）；使用三态切换跟随操作系统，无闪烁（N9）；在暗色表面上重新检查图表颜色（N10）。对于视力正常的用户，亮色模式通常阅读效果更好，而暗色模式对某些低视力用户有帮助，因此同时提供两者。参考暗色调色板和令牌架构：references/dark-mode-and-tokens.md。

需要捕捉的反模式

在界面中出现三个或更多饱和色相；CTA 色相被重复用于标题、图标和徽章；等明度的饱和补色（边缘振动）；彩色背景上的灰色文本（使用背景色相在调整后的 L 值）；浅灰色在米白色背景上的“极简”文本低于 4.5:1；中等 L 值的强调色配白色文本；outline: none 没有替代方案；悬停和激活状态仅通过微小的色相偏移来区分（将 L 改变 0.05-0.10）；已禁用看起来像已启用；相同的饱和品牌色未经修改地在暗色模式下重用；

…

[因翻译而截断]