Hallmark 色彩系统完全指南：OKLCH 四层调色板（paper/ink/neutrals/accent）新手快速上手
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
Hallmark 是一个面向 Claude Code、Cursor 和 Codex 的"反 AI 味"设计技能（design skill），它的核心武器就是一套OKLCH 四层色彩系统：Paper（底色）、Ink（文字）、Neutrals（中性灰阶梯）、Accent（强调色）。掌握这四个词，你就能看懂 Hallmark 生成的每一套主题为什么"看起来像人做的"，而不是千篇一律的紫蓝渐变。本文带你从零理解 OKLCH 调色板，并附真实主题实例与文件路径。
为什么 Hallmark 只认 OKLCH？
大多数 AI 生成的界面败在配色上：默认选蓝色、用纯黑#000、拉一条紫到青的渐变、把强调色铺满 30% 的页面。Hallmark 在 references/color.md 中直接把这些列为"禁止项"。
它的四条基本原则（见 color.md 第 5–10 行）：
- 只用 OKLCH——感知均匀的颜色空间，明度可预测、色相在深浅变化中保持一致。
hsl()和rgb()会"撒谎"； - 强调色最多 1 个（极限 2 个），且只占视口的3% 以下；
- 禁止纯黑纯白——任何颜色都要带一点色度（chroma），向锚点色相倾斜；
- 灰色也要"染色"——锚点色相是暖橙，中性灰就偏暖；是冷蓝，中性灰就偏冷。
四层调色板逐个拆解
一个完整的 Hallmark 调色板有四个层次（color.md 第 12–19 行）：
1️⃣ Paper —— 页面底色
页面的"纸"。亮色模式取oklch(96–98% 0.005–0.015 锚点色相)，深色模式取oklch(12–16% …)。注意：纸永远不是纯白，而是带一点点色度的"米纸"或"炭色"。
2️⃣ Ink —— 主文字色
承载正文的墨色。亮色模式oklch(16–22%)，深色模式oklch(92–96%)。同样带锚点色相的微弱染色——所以 Hallmark 的深色主题从不用#fff。
3️⃣ Neutrals —— 中性灰阶梯
在 Paper 和 Ink 之间铺5 到 9 级灰色（--color-rule、--color-muted、--color-neutral等），每级都保留 0.005–0.015 的低色度。这套阶梯给了页面排印深度，而不需要靠强调色。
4️⃣ Accent —— 唯一的高饱和强调色
色度被限定在0.12–0.22之间，只用于：激活的导航项、焦点环、悬停下划线、主 CTA 的边框或文字、标题旁的小色块。规则原话是："它是荧光笔，不是色块。"
下面这张 Slow Pour 咖啡订阅页就是典型样本：暖燕麦色的 paper 底色 + 深棕 ink 文字 + 仅出现在小标签和按钮上的赤陶色 accent，四层的分工一目了然。
深色模式配方：不是"反色"
深色主题不是简单把颜色倒过来。color.md 第 64–71 行 的配方：
- Paper 明度 12–18%（而非
#000），Ink 明度 92–96%（而非#fff）； - 正文字重减 50 单位（400 → 350），补偿浅字在深底上的视觉重量；
- Accent 色度降 0.02–0.04，明度提 5–10%；
- 更高的层级表面更亮而不是更暗，每级加约 3% 明度；
- 色相绝不切换——只动明度和色度，锚点色相保持不变。
Hyperlane 开发者峰会页正是这套配方的产物：带蓝灰调的炭色 paper、近白的 ink，以及只出现在按钮和斜体字上的信号橙 accent。
对比度门槛与"禁用清单"
配色不是艺术问题，是数学问题。Hallmark 优先用 APCA，否则用 WCAG 2.1（color.md 第 51–62 行）：
| 内容 | 最低 | 目标 |
|---|---|---|
| 正文 | 4.5:1 | 7:1 |
| 大字号（≥18.66px 粗体或 24px） | 3:1 | 4.5:1 |
| UI 组件边界 | 3:1 | 4.5:1 |
| 占位符 / 辅助文字 | 4.5:1 | 4.5:1 |
同时有一份硬性的Bans 清单（color.md 第 73–83 行）：禁纯黑、禁纯白底、禁零色度灰、禁紫到青渐变、禁强调色铺大面积背景、禁三色渐变（只允许两停）。这些规则会由 65 道 slop-test 门槛在生成前自动检查。
如何落地：22 套主题 + 自定义主题协议
所有规则最终固化成 CSS 变量。项目自带的 22 套命名主题（Specimen、Midnight、Terminal、Garden、Newsprint……）全部集中在 site/css/tokens.css 中，每个主题占一个[data-theme="..."]块，只写--color-paper、--color-ink、--color-accent等命名令牌——例如 Specimen 主题令牌（第 14–27 行） 就是"暖燕麦编辑风"的完整 OKLCH 四层结构。
当你说出品牌色（"用我们的赤陶色"）或要求"自定义主题"时，Hallmark 会走custom 分支：只问你一个 4–8 个词的"vibe"，然后按固定顺序构造锚点强调色 → paper → ink → 中性灰 → focus 色，完整协议见 references/custom-theme.md，三个真实成品案例（Coffeebox / Loop / Mossroot）在 site/_tests/custom/ 中可直接查看。
核心文件路径速查
| 文件 | 作用 |
|---|---|
| skills/hallmark/SKILL.md | 技能主入口：设计流程、主题轮换规则 |
| skills/hallmark/references/color.md | OKLCH 四层调色板规则 + 对比度 + Bans |
| skills/hallmark/references/custom-theme.md | 自定义主题协议与三个实例 |
| site/css/tokens.css | 22 套主题的完整色彩令牌定义 |
| site/_tests/custom/ | custom 分支的三个成品页面 |
小结：OKLCH 负责"说得准"，paper/ink/neutrals/accent 四层负责"摆得对"，Bans 清单负责"不翻车"。下次让 AI 帮你做配色时，把这三句话给它，你的页面就不至于看起来"是 AI 做的"。
【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
