UI 设计师的色彩理论：调色板、对比度与情感表达
学习色彩理论的基础知识——色相、饱和度、明度、色彩和谐，以及如何为数字产品构建无障碍、富有情感共鸣的色彩系统。
色彩是任何设计中最直接的视觉信号。在用户读到任何文字之前，色彩就已经传达了情绪、层级关系和品牌形象。然而，许多开发者和设计师凭直觉选择颜色，最终得到的调色板要么感觉不对，要么无法通过无障碍检查，要么在深色/浅色模式下相互冲突。理解色彩理论能为你的每一个色彩决策提供有据可依的基础。
色彩模型基础
色相、饱和度与明度（HSL）
HSL 是设计工作中最直观的色彩模型：
- 色相（Hue） — 颜色本身：0° = 红，60° = 黄，120° = 绿，180° = 青，240° = 蓝，300° = 品红
- 饱和度（Saturation） — 色彩的鲜艳程度：0% = 灰色，100% = 完全饱和
- 明度（Lightness） — 颜色的明暗程度：0% = 黑色，50% = 纯色，100% = 白色
/* 相同色相，不同饱和度与明度 */
hsl(220, 90%, 50%) /* 鲜艳的蓝色 */
hsl(220, 30%, 50%) /* 柔和的钢蓝色 */
hsl(220, 90%, 90%) /* 非常浅的蓝色调 */
hsl(220, 90%, 20%) /* 非常深的蓝色调 */
HSL 的强大之处在于你可以每次只调整一个维度。想让颜色更亮，就增大 L；想让颜色不那么鲜艳，就降低 S。
RGB 与 HEX
RGB 通过红、绿、蓝三个通道的值（0–255）来定义颜色。HEX 是同样的表达方式，只是用十六进制表示：
rgb(59, 130, 246) ≡ #3B82F6
HEX 是 CSS 和设计工具的标准格式。可使用我们的 Color Converter 在各格式之间转换。
色彩和谐
色彩和谐是指基于色轮上几何关系而形成的视觉上令人愉悦的颜色组合。
单色配色
同一色相，变化饱和度和明度。简洁、统一、精致。
基础色： hsl(220, 80%, 50%)
浅色调： hsl(220, 70%, 85%)
深色调： hsl(220, 60%, 25%)
柔和色： hsl(220, 20%, 60%)
非常适合极简主义产品、深色主题和以品牌为核心的界面。
互补色配色
色轮上直接相对（相差 180°）的两种色相。对比强烈、色彩鲜明——应将第二种颜色作为点缀色少量使用。
主色： hsl(220, 80%, 50%) /* 蓝色 */
点缀色： hsl(40, 90%, 55%) /* 橙色/琥珀色 */
两种颜色等量使用会产生视觉张力，应让其中一种占主导地位。
类似色配色
三种或更多相邻色相（相差 30–60°）。感觉自然和谐，如日落中的渐变色。
hsl(200, 70%, 50%) /* 青蓝色 */
hsl(220, 80%, 50%) /* 蓝色 */
hsl(250, 70%, 55%) /* 蓝紫色 */
适合用于背景和细微的层次叠加。
三角配色
三种均匀分布的色相（相差 120°）。充满活力且平衡——需要精心管理，避免视觉混乱。
hsl(0, 80%, 55%) /* 红色 */
hsl(120, 70%, 45%) /* 绿色 */
hsl(240, 75%, 55%) /* 蓝色 */
适用于信息图表、图表和数据可视化。
构建设计系统色彩调色板
一个完善的色彩系统包含以下几个层次：
1. 品牌色（主色 + 辅助色）
代表产品形象的颜色，通常为 1–2 种色相。
2. 语义色
在 UI 中具有特定含义的颜色：
| 标记 | 用途 |
|---|---|
success |
绿色——正向状态、确认操作 |
warning |
黄色/琥珀色——警示、降级状态 |
error |
红色——错误、破坏性操作 |
info |
蓝色——中性信息、提示 |
3. 中性色阶
用于文字、背景、边框和分割线的灰色。完整的色阶通常从 50（接近白色）到 950（接近黑色）：
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
4. 完整色阶
为每种品牌色生成与中性色阶模式相匹配的 10 级色阶。Radix Colors 和 Tailwind 的色彩调色板是经过良好校准的参考资源。
色彩对比度与无障碍
WCAG 2.2 要求文字与背景之间的最低对比度如下：
| 文字类型 | 最低标准（AA） | 增强标准（AAA） |
|---|---|---|
| 普通文字（< 18pt） | 4.5:1 | 7:1 |
| 大号文字（≥ 18pt 或 14pt 粗体） | 3:1 | 4.5:1 |
| UI 组件、图标 | 3:1 | — |
对比度计算公式：
ratio = (L1 + 0.05) / (L2 + 0.05)
其中 L1 为较亮颜色的相对亮度，L2 为较暗颜色的相对亮度。
实用规则：
- 白色文字适用于明度低于约 45–50% 的颜色（取决于饱和度）
- 深色文字适用于明度高于约 50–55% 的颜色
- 同一颜色在白色背景上可能对比度不足，但在浅灰色背景上则可能通过检测
永远不要单独依赖颜色来传递信息——每 12 人中就有 1 人存在某种形式的色觉障碍。始终将颜色与形状、图标或文字配合使用。
深色模式中的色彩
深色模式并不是简单地将浅色调色板反转。核心原则如下：
避免使用纯黑色背景
#000000 与文字之间会形成刺眼的对比，视觉上也显得厚重。请使用深灰色：
/* 浅色模式背景 */
background: #ffffff;
/* 深色模式背景 */
background: #0f172a; /* 或 #111827, #1a1a2e */
降低深色界面的饱和度
高饱和度颜色在深色背景上容易显得刺眼，并造成视觉疲劳。在深色模式下应适当降低品牌色的饱和度：
/* 浅色模式主色 */
--primary: hsl(220, 90%, 50%);
/* 深色模式主色——相同色相，降低饱和度，提高明度 */
--primary: hsl(220, 70%, 65%);
通过明度体现层级
在深色模式中，层级更高的界面元素显得更亮（就像凸起的元素接收到更多光线）：
--surface-1: #1e293b; /* 基础层 */
--surface-2: #253044; /* 卡片层 */
--surface-3: #2d3a52; /* 模态框、下拉菜单 */
不同色相的色彩心理学
| 色相 | 联想 | 典型用途 |
|---|---|---|
| 红色 | 紧迫感、危险、热情、活力 | CTA 按钮、错误提示、警报、促销 |
| 橙色 | 温暖、创意、热情 | 高亮、餐饮、娱乐 |
| 黄色 | 乐观、警示、吸引注意 | 警告、高亮、儿童产品 |
| 绿色 | 成长、成功、自然、平静 | 成功状态、金融、健康 |
| 蓝色 | 信任、稳定、专业 | 科技、金融、医疗、默认链接 |
| 紫色 | 奢华、创意、神秘 | 高级会员、美妆、灵性 |
| 粉色 | 活泼、浪漫、关怀 | 生活方式、医疗、美妆 |
| 灰色 | 中立、平衡、精致 | UI 框架、次要文字 |
这些只是一般性概括——文化背景和行业规范的影响至关重要。蓝色在金融领域传递"可信赖"的感觉，但在餐饮行业却显得平淡无奇。
实践中的色彩工作流程
- 从中性色阶（灰色调色板）开始
- 选择一种在白色和深色背景上都具有强对比度的主品牌色
- 定义语义色（成功、警告、错误、信息）
- 为每种颜色生成完整色阶（50–950）
- 验证每种文字与背景组合的对比度
- 在浅色和深色模式下分别测试
- 使用色盲模拟工具进行检查
好的色彩是隐形的——用户在意识到它之前就已经感受到了。一个构建良好的色彩系统能让你的 UI 显得专业、可信且无障碍，即便没有人能明确说出原因所在。