从品牌色推出完整 UI 色板 · 色导网指南
手上只有一个十六进制值，要的是一整套能开发的变量。下面六步是可重复的流程，中间每一步都能验证。
六步
- 定锚点：把品牌色换成 HSL，记下色相。本例用 #1F3A5F，色相约 213°。
- 排明度：固定色相，按十档明度生成色阶。两端的饱和度要往下收，否则浅色发荧光、深色发黑。
- 标可用区：逐级算它压白底的对比度，标出哪几级能做正文、哪几级只能做底色。这一步决定后面怎么用。
- 挑主色位：主色通常落在中间偏深那一档——既能压白字，也能当作浅底上的强调。
- 配语义色：成功、警告、危险、信息四个另取色相，但饱和度压到品牌色之下，让它们在版面里权重更低。
- 逐对校验：把所有会同时出现的文字与底色组合都算一遍，不达标的直接改数值而不是改字号。
第二、三步的实际结果
| 级别 | 色值 | 压白底对比度 | 能做什么 |
|---|---|---|---|
| 50 | #EAEFF5 | 1.16:1 | 只做底色与分隔 |
| 100 | #D5DFEC | 1.35:1 | 只做底色与分隔 |
| 200 | #B7CAE1 | 1.67:1 | 只做底色与分隔 |
| 300 | #92AFD3 | 2.26:1 | 只做底色与分隔 |
| 400 | #638FC4 | 3.36:1 | 大字、图形、边框 |
| 500 | #3D70AE | 5.09:1 | 正文 AA、链接 |
| 600 | #2F537E | 7.90:1 | 正文 AAA、标题 |
| 700 | #243D5B | 11.09:1 | 正文 AAA、标题 |
| 800 | #1B2C41 | 14.16:1 | 正文 AAA、标题 |
| 900 | #121D2B | 16.99:1 | 正文 AAA、标题 |
可以直接看出分界：对比度跌到 4.5 以下的那几级永远不要用于正文，不管设计稿上看起来多好。这比记住「300 以下不能做文字」可靠，因为不同色相的分界位置不一样。
第五步容易做错的地方
- 语义色不要从品牌色阶里取。蓝色品牌下用深蓝表示「危险」，用户读不出警示。
- 四个语义色彼此的色相要拉开，并且过一遍色觉模拟——红绿这一对在模拟下最容易塌。
- 语义色各自也需要一个很浅的底色版本（提示条用）和一个更深的文字版本，不是只要一个值。
交付物
最终交付的不只是色值，而是色值加用法约束。下面是本例的变量写法，命名里带级别数字，这样开发看到 --brand-200 就知道它是浅色、不能放文字。
CSS 自定义属性
:root {
--brand-50: #EAEFF5;
--brand-100: #D5DFEC;
--brand-200: #B7CAE1;
--brand-300: #92AFD3;
--brand-400: #638FC4;
--brand-500: #3D70AE;
--brand-600: #2F537E;
--brand-700: #243D5B;
--brand-800: #1B2C41;
--brand-900: #121D2B;
--ok: #2F7465;
--warn: #9A7418;
--bad: #B4342A;
--info: #2F5A91;
}