色彩理论
色彩三属性
色相（Hue）
颜色的名称，即红、橙、黄、绿、蓝、紫等。色相决定了颜色的基本类别，在色轮上用角度表示（0°~360°）。
饱和度（Saturation）
颜色的纯度/鲜艳程度。高饱和度 = 鲜艳，低饱和度 = 灰暗。
明度（Brightness / Value）
颜色的明暗程度。加白 = 提高明度（tint），加黑 = 降低明度（shade）。
色轮与配色方案
互补色（Complementary）
色轮上对立的两个颜色，对比强烈。
- 蓝 ↔ 橙
- 红 ↔ 绿
- 紫 ↔ 黄
适合需要强调和突出的场景，但大面积使用会产生视觉疲劳。
类似色（Analogous）
色轮上相邻的 2~3 个颜色，和谐自然。
- 蓝 + 青 + 绿
- 橙 + 红 + 品红
适合营造统一、舒适的视觉感受。
三等分（Triadic）
色轮上等距的三个颜色（120° 间隔），活泼丰富。
适合需要多色搭配但又要保持平衡的场景。
分裂互补（Split-Complementary）
一个基色 + 其互补色两侧的颜色。比纯互补色更柔和、更容易驾驭。
色彩在 UI 中的应用
60-30-10 法则
| 比例 | 角色 | 说明 |
|---|---|---|
| 60% | 主色 | 背景色，奠定整体基调 |
| 30% | 辅助色 | 卡片、面板等次级区域 |
| 10% | 强调色 | CTA 按钮、链接、重要标识 |
语义色彩
| 颜色 | 语义 | 使用场景 |
|---|---|---|
| 蓝色 | 信任、专业 | 链接、信息提示 |
| 绿色 | 成功、安全 | 成功状态、确认操作 |
| 红色 | 危险、错误 | 错误提示、删除操作 |
| 黄色/橙色 | 警告、注意 | 警告信息、需要关注的状态 |
| 灰色 | 中性、禁用 | 禁用状态、次要信息 |
对比度与可访问性
WCAG 2.1 规定的最低对比度要求：
| 文本类型 | AA 级 | AAA 级 |
|---|---|---|
| 正文文字 | 4.5:1 | 7:1 |
| 大号文字（≥ 18px bold / 24px） | 3:1 | 4.5:1 |
| 非文本元素（图标、边框） | 3:1 | — |
暗色模式设计要点
不要使用纯黑
纯黑（#000000）背景上的白色文字会产生过高对比度，导致视觉疲劳。推荐使用深灰：
- Material Design：
#121212 - Apple：
#1C1C1E - 带色调的深色（如深蓝、深暖灰）更有品质感
降低白色亮度
暗色模式下文本不用纯白，而是使用带透明度的白色：
- 主要文字：
rgba(255, 255, 255, 0.87) - 次要文字：
rgba(255, 255, 255, 0.60) - 禁用文字：
rgba(255, 255, 255, 0.38)
调整强调色
亮色模式下的强调色在暗色背景上可能过于刺眼，需要：
- 降低饱和度
- 使用更柔和的色调变体
- 确保对比度仍符合可访问性标准
层级用阴影 + 亮度
暗色模式下无法用阴影表达层级（暗色上的暗色阴影不可见），改用表面亮度来表达高度：
| 层级 | 表面亮度提升 |
|---|---|
| 0dp（基底） | 0% |
| 1dp | +5% |
| 2dp | +7% |
| 4dp | +9% |
| 8dp | +12% |
| 16dp | +15% |
色彩心理学
| 颜色 | 正面联想 | 负面联想 | 行业应用 |
|---|---|---|---|
| 蓝色 | 信任、稳定、专业 | 冷漠、忧郁 | 科技、金融、医疗 |
| 红色 | 热情、紧迫、力量 | 危险、攻击 | 餐饮、零售、娱乐 |
| 绿色 | 自然、健康、成长 | 嫉妒 | 环保、健康、金融 |
| 黄色 | 乐观、温暖、活力 | 焦虑、廉价 | 食品、儿童、创意 |
| 紫色 | 优雅、神秘、创意 | 奢侈、不安 | 美容、奢侈品、创意 |
| 橙色 | 友好、活力、温暖 | 轻浮 | 食品、运动、社交 |
| 黑色 | 高级、优雅、力量 | 压抑、沉重 | 奢侈品、时尚、科技 |