我做过一个后台系统，主色是蓝。上线之后，页面上陆续出现了：链接蓝、按钮蓝、标签蓝、图表蓝、进度条蓝、错误提示旁边的浅蓝。
它们其实是同一个蓝的七个变体，因为每次新增一个元素，都有人凭感觉挑一个「看起来差不多」的蓝。
这不是审美问题，是制度问题。
灰阶负责结构，彩色负责意义
一个界面的层次——背景、卡片、边框、正文、次要文字——全部由灰阶承担就足够了。人眼对明度差的区分能力远强于对色相的区分能力，八级灰阶能表达的层次，比八种近似的蓝要多。
彩色因此可以空出来，只承担一件事：告诉用户这里有可以做的事，或者这里出事了。
于是规则变得非常短：
- 可交互的强调：一种颜色
- 语义警告：留给系统，不用主题色
- 其余全部：灰阶
落地的时候会遇到什么
第一个问题：链接和正文怎么区分。
答案是不要靠颜色。链接用一条下划线，悬停时下划线变粗。颜色留给真正的强调，链接本身不需要额外喊叫。
.link {
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 1px;
transition: background-size 0.22s ease;
}
.link:hover {
background-size: 100% 2px;
}第二个问题：选中状态怎么表达。
下划线、左边框、字重。三种都可以，选一种，全站一致。不要今天用背景块、明天用左边框。
第三个问题：深色模式。
这是单色方案真正的红利。因为只有一组灰阶和一个强调色，深色模式只需要重定义这几变量：
| 变量 | 浅色 | 深色 |
|---|---|---|
| 背景 | #FAFAF8 | #0C0C0D |
| 卡片 | #FFFFFF | #141417 |
| 正文 | #0E0E10 | #F1F1EE |
| 次要文字 | #5A5A63 | #A3A3AC |
| 强调 | #2F6B45 | #6FBF87 |
注意强调色在深色下要提亮。深绿放在黑底上对比度不够，读起来像没加载完。
那个颜色是怎么定的
规则说「只留一个强调色」，但它没有回答最难的那个问题：留哪一个。
我的方法是先确定背景的明度，再让强调色和它拉开足够的距离。
浅色主题的背景接近白。如果强调色也用高明度的绿，它会沉进背景里，所以浅色下要压暗成 #2F6B45——这样它和正文的对比度在 5:1 以上，既能做链接色，也能做按钮底色。
深色主题正好相反。背景已经接近黑，强调色必须提亮成 #6FBF87。黑底上的深绿对比度不够，读起来像没加载完。
这两个值不是同一个颜色的深浅变体，而是各自在自己的背景之上单独选出来的。用相同的色相保证它们是同一种颜色，用不同的明度保证各自都看得清。
还有一条额外的约束：这个颜色要能同时承担三种角色——文字色（链接）、描边色（聚焦圈）、填充色（按钮背景）。做填充时它要和文字配对，所以饱和度不能太高，否则色块上的字会糊成一片。
至于为什么是绿而不是蓝，有一部分是审美：这个站点想表达的是一种慢下来的气质，绿色比蓝色更接近它。但审美不能当唯一的理由，所以最终拍板的是上面那几条可以验证的约束——对比度达标、经得起当填充色、在深色主题里有对应的提亮版本。
约束带来的东西
限制颜色的另一个效果是：当你想强调一件事，你只剩一种手段。这会逼你把注意力放回内容本身——如果一句话需要靠红色加粗来让人注意，那多半是这句话写得不够清楚。
我现在判断一个界面配色是否失控，只看一个问题：页面上有几种颜色在抢注意力。答案是「一种」时，通常不用再改了。
全文完