为什么 UI 配色总是显得“脏”和“乱”？
很多新手以为配色靠灵感，其实专业界面更像一套规则：先确定主色，再控制比例，最后校验对比度。颜色一旦失去秩序，界面就会显得杂乱，用户也不知道该点哪里。以无障碍标准为例，WCAG 2.2 建议正文文字与背景至少达到 4.5:1 对比度，这说明配色不只是好看，还要可读、可用。
案例：一个按钮的颜色改动
某效率工具在注册页改版时，把主按钮从低饱和灰蓝改为品牌蓝，同时提高文字对比度，并减少周围装饰色。改版后关键按钮更突出，注册点击率提升约 18%。这类变化并不神奇，本质是颜色层级更清楚了。
第一步：先定主色，而不是先选五颜六色
专业 UI 配色通常从一个主色开始。主色承担品牌识别，也用于关键操作，例如注册、购买、发布。选主色时可以参考品牌资产、行业情绪和目标用户：金融与医疗常用蓝色传递稳定，餐饮与运动可用橙红制造活力，工具类产品则适合中性底色加一个强调色。
用 HSL 快速生成色阶
相比 RGB，HSL 更适合设计师理解颜色。保持色相 H 不变，微调饱和度 S 和明度 L，就能得到同一主色的深浅变化。例如主色是 hsl(220, 90%, 56%)，悬停态可以加深 8%，禁用态可以提高明度并降低饱和度，让状态既统一又有区分。
| 色彩角色 | 建议用途 | 常见比例 |
|---|---|---|
| 主色 | 按钮、链接、重点标签 | 5%–10% |
| 辅助色 | 图表、状态、模块点缀 | 15%–25% |
| 中性色 | 背景、文字、边框 | 65%–80% |
第二步：用 60-30-10 控制颜色比例
确定主色后，下一步是控制面积。常见做法是 60% 背景色、30% 次级色、10% 强调色。背景负责承载内容，卡片和模块负责分层，强调色只留给最重要的行动点。若强调色铺得太满，用户会视觉疲劳，重点反而被稀释。
好的配色不是让界面更热闹，而是让用户第一眼知道该看哪里、该点哪里。
建立三层背景
- 页面底色：浅灰或低饱和中性色，例如 #F7F8FA
- 卡片背景：白色或更亮的中性色，例如 #FFFFFF
- 强调区域：主色本身，或主色 10% 透明度的浅色底
这种分层方式能让界面自然产生空间感，不需要依赖大量阴影或边框。
第三步：用对比度和语义色校验可读性
专业配色必须经得起可用性检验。正文文字与背景建议达到 4.5:1，大号标题或图标可适当放宽到 3:1。可以使用 Figma 对比度插件、WebAIM Contrast Checker 等工具快速检查。状态色也要统一：成功、警告、错误、信息各自固定，避免同一页面出现多种相似红绿蓝。
- 成功：#16A34A
- 警告：#F59E0B
- 错误：#DC2626
- 信息：#2563EB
同时，不要只靠颜色传递状态。对色弱用户来说，红绿差异可能不明显，最好搭配图标、文字或边框。
灰阶比彩色更重要
UI 中大部分面积其实是文字、边框、分割线和禁用态。建议建立 9 级灰阶：标题可用 #111827，正文用 #374151，辅助说明用 #6B7280，禁用内容用 #9CA3AF。灰阶稳定后，彩色只需少量点缀，界面就会显得干净、专业。
常见误区与快速修正
| 误区 | 问题 | 修正 |
|---|---|---|
| 五颜六色 | 重点不清 | 保留一个主色，其他颜色服务主色 |
| 纯黑背景 | 对比刺眼 | 使用 #111827 或深灰替代 |
| 饱和度过高 | 显得廉价 | 降低 10%–20% 饱和度 |
| 只用颜色传状态 | 色弱用户难识别 | 加图标、文字或边框 |
行动清单：今天就能做的 5 件事
- 为界面选 1 个主色，并生成 5 个深浅色阶。
- 用 60-30-10 重新分配背景、卡片和按钮颜色。
- 用对比度工具检查正文是否达到 4.5:1。
- 固定成功、警告、错误、信息四类语义色。
- 建立标题、正文、辅助、禁用四级文字灰阶。
- 把当前项目截图转成灰度模式，检查去掉颜色后是否仍能看清信息层级。