色彩系统 —— 一个品牌色、四个语义色、一串灰

本课导读

多数"教配色"的内容从色轮、互补色、三分法讲起——那是给插画和海报的。界面配色是工程问题多于艺术问题：你需要的不是四十种颜色的灵感，而是一套结构——一串灰打底、一个品牌色点睛、四个语义色各司其职，外加一条谁也不能违反的对比度红线。本课把这套结构立起来，下一课它会直接变成 Design Token。预计 40 分钟。

真相：界面 90% 是中性色

打开任何一个成熟产品截图，用吸管数颜色：绝大部分像素是白、灰、黑，有彩色只出现在按钮、链接、图标、状态提示这些刀刃上。这不是保守，是分工——

• 中性色负责结构：背景、边框、文字层级，页面的骨架全是灰阶的事
• 有彩色负责说话：出现即有含义（可以点、成功了、危险）——含义靠稀缺维持，满屏彩色等于满屏噪音

经典比例是 60-30-10：60% 主背景色、30% 辅助面（卡片、面板）、10% 强调色。学径的百科气质正是这么来的：米白纸面 + 近黑文字 + 极少量强调色，克制本身就是风格。

中性色阶：一串灰，但别用纯灰

灰阶要成阶梯（又是阶梯），8–10 级从近白到近黑，常按明度命名：gray-50 / 100 / 200 / … / 900。两条经验：

• 别用纯灰。#808080 这种 RGB 三值相等的灰发闷。往里掺一点点品牌色的色相（偏暖或偏冷各 2–3 个百分点饱和度），整套界面立刻"活"而且成套——你未必说得出为什么，但看得出来
• 文字只取三级：主文字（近黑，如 gray-900）、次要文字（中灰，如 gray-600）、禁用/占位（浅灰，如 gray-400）。三级够表达所有层级——第四级出现时，先怀疑是不是层级设计出了问题，而不是灰不够用

品牌色与语义色：五个有彩色的岗位表

品牌色一个。用在主按钮、链接、选中态、进度条——一句话："当前最该被注意的可交互物"。它是一屏唯一最强对比的默认持有者，所以一屏出现两大片品牌色时，几乎总有一片是错的。

语义色四个，各有编制、不许挪用：

语义	惯例色相	岗位
success	绿	成功提示、完成状态
warning	黄/橙	需要注意但不阻断
danger	红	错误、删除、不可逆操作
info	蓝	中性提示

"不许挪用"是纪律的核心：红色一旦在某处被用来"好看"，用户对删除按钮的红就会脱敏。语义色的价值 = 它出现频率的倒数。

挑色的工程做法：五个有彩色取相近的饱和度与明度（色相不同、"响度"一致），这样任何两个并排出现都不打架。先定品牌色，语义色跟着它的饱和度/明度走，灰阶掺它的色相——一套颜色从一个决策派生，这就叫系统。

对比度：唯一不能商量的红线

前面都是"建议"，这条是硬约束：正文文字与背景的对比度 ≥ 4.5:1（WCAG AA），大字（约 24px+，或 19px 加粗）≥ 3:1。

最常见的翻车就是上一课埋的雷：灰字放灰底。设计稿上"高级"的浅灰小字（gray-400 放白底约 2.5:1），在阳光下的手机屏、上了年纪的眼睛、低亮度模式里直接消失。自查办法零成本：任何在线对比度检查器（搜 contrast checker），输入前景背景两个色值即得比值。

深色主题：是重新设计，不是反色

把颜色全部取反≠深色主题。深色模式有自己的一套规则：纯黑背景发死（通常用 #121212 一类近黑）、阴影失效改用"越亮越高"的海拔逻辑、饱和色在深底上会"发荧光"需要降饱和、对比度要全部重算……

**结论：深色主题是第二套完整的色彩系统，维护成本接近翻倍。**所以它是产品决策而不是免费赠品。学径百科风改版时干脆让深色主题退役——纸质百科的隐喻本来就属于浅色，与其养两套不到位的，不如做好一套到位的。做减法也是色彩系统决策，而且常常是对的那个。

✍️ 练习

练习 1：色彩审计

任选一个你常用的产品，截 3–5 屏，数出它的颜色清单：灰阶几级？品牌色是谁、出现在哪些岗位？语义色有没有被挪用（比如红色出现在与危险无关的地方）？找一处你怀疑过不了 4.5:1 的文字，用对比度检查器验证。

✅ 参考答案

开放题，自查四点：① 清单是否收敛（成熟产品通常 10 级灰 + 5 个左右有彩色就覆盖 95% 界面，数出 30 种颜色说明产品失控或你把插图也数了）；② 品牌色岗位是否集中在"可交互物"；③ 挪用案例最常见是绿色（被拿去当装饰）和红色（被拿去"喜庆"）；④ 对比度翻车高发区：占位文字、时间戳、禁用态——禁用态允许低对比（它本来就该退后），占位文字承载必读信息则不允许。

练习 2：给学径挑一套语义色

学径目前的强调色很克制。假设要加四个语义色（success/warning/danger/info），给出四个具体色值，要求：饱和度明度彼此接近、在米白底上都 ≥ 4.5:1（配深一级的文字用色也行）、气质与"纸质百科"不打架。写一句话说明你如何保证"响度一致"。

✅ 参考答案

一种合格思路（色值不唯一）：全部取低饱和的"墨水感"色系，如 success #2f6b3a、warning #8a5a00、danger #9b2c2c、info #1f4e79——四色都压暗到能直接当文字色（深色在浅底天然易过 4.5:1），饱和度收在相近区间，像同一盒墨水的四支笔。保证响度一致的操作：在 HSL 里固定 S 和 L 的取值范围（如 S 50–60%、L 30–35%），只动 H。若答案用了高亮荧光色或彼此明度差很大，则与百科气质和"并排不打架"两条相悖。

📝 随堂测验

随堂测验0 / 5 题正确

1. '界面 90% 是中性色'背后的分工是？

A中性色便宜，有彩色渲染开销大B灰阶和留白是极简主义的审美要求C中性色负责结构（背景/边框/文字层级），有彩色负责说话（出现即有含义）——含义靠稀缺维持D打印成本考虑

2. 为什么建议灰阶'别用纯灰'？

A纯灰在部分显示器上无法显示BRGB 三值相等的灰发闷；掺入一点品牌色色相，整套界面更活且自动成套C纯灰对比度一定不达标D纯灰与衬线字体冲突

3. '语义色不许挪用'的理由是？

A语义色的价值等于其出现频率的倒数——红色被拿去'好看'一次，用户对删除按钮的红就脱敏一分B设计规范文档写了就要遵守C挪用会导致代码里的变量名混乱D四个颜色不够用时才可以挪用

4. 对比度 4.5:1 这条红线的正确定位是？

A无障碍人群的专属需求，普通产品可豁免B设计品味问题，资深设计师可凭经验打破C只约束深色主题D硬约束、发布检查项——所有人都会在强光/疲劳/低亮度时变成'低视力用户'，4.5:1 保护所有人的糟糕时刻

5. '深色主题是重新设计，不是反色'的依据不包括？

A纯黑背景发死，需用近黑；阴影失效，改用越亮越高的海拔逻辑B饱和色在深底会发荧光，需降饱和；对比度需全部重算C它是第二套完整色彩系统，维护成本接近翻倍，因此是产品决策D深色主题技术上无法用 CSS 实现，必须出两套代码

本课小结

• 界面配色是结构问题：一串灰（8–10 级）+ 一个品牌色 + 四个语义色，60-30-10
• 灰不用纯灰，掺品牌色色相；文字只取三级
• 品牌色 = 当前最该被注意的可交互物；语义色不许挪用，价值是出现频率的倒数
• 挑色工程化：五个有彩色响度一致（饱和度明度相近），全部从品牌色派生
• 4.5:1 是硬约束，发布检查项，不是品味问题
• 深色主题 = 第二套系统 = 产品决策；做减法常常是对的

字阶、间距、色板三套系统都立起来了——但现在它们还住在你的笔记里。下一课把它们变成正式资产：组件与 Design Token，顺便回答一个问题：为什么学径全站换肤只用改一层变量。