| 模型 | 说明 | 用途 |
|---|
| RGB | 红绿蓝（加色混合） | 屏幕显示、CSS |
| HSL | 色相、饱和度、亮度 | 设计直觉友好 |
| HSV/HSB | 色相、饱和度、明度 | 取色器常用 |
| CMYK | 青、品红、黄、黑（减色混合） | 印刷 |
| LAB | 明度、a（绿-红）、b（蓝-黄） | 感知均匀、色彩校正 |
| LCH / OKLCH | 基于 LAB 的圆柱坐标 | 现代 CSS、设计系统 |
/* 命名色 */
color: red;
/* 十六进制 */
color: #FF5733;
color: #F53; /* 简写 */
/* RGB / RGBA */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.8); /* 带透明度 */
/* HSL / HSLA */
color: hsl(14 100% 60%);
color: hsl(14 100% 60% / 0.8);
/* OKLCH（推荐用于设计系统） */
color: oklch(70% 0.15 30);
/* color-mix（CSS 原生混合） */
color: color-mix(in oklch, #FF5733 50%, #3366FF);
0° 红
/ \
330° 紫 30° 橙
| |
270° 蓝 90° 黄
\ /
210° 青 150° 绿
\ /
180°
| 方案 | 定义 | 效果 | 示例 |
|---|
| 单色 (Monochromatic) | 同一色相，不同明度/饱和度 | 和谐、统一 | 蓝的深浅变化 |
| 互补 (Complementary) | 色轮对面 180° | 高对比、活力 | 蓝 + 橙 |
| 类似 (Analogous) | 相邻 30° 范围 | 柔和、自然 | 蓝 + 青 + 绿 |
| 三元 (Triadic) | 等距 120° | 丰富、平衡 | 红 + 黄 + 蓝 |
| 分裂互补 (Split-Comp.) | 互补色两侧各 30° | 对比但不刺眼 | 蓝 + 黄橙 + 红橙 |
| 四元 (Tetradic) | 两对互补色 | 丰富但需谨慎 | 红 + 蓝 + 黄 + 绿 |
Design Token
├── Primitive（原始色）
│ ├── blue-50, blue-100, ... blue-900
│ ├── red-50 ... red-900
│ └── neutral-50 ... neutral-900
├── Semantic（语义色）
│ ├── primary / secondary / tertiary
│ ├── success / warning / error / info
│ ├── background / surface / card
│ └── text-primary / text-secondary / text-disabled
└── Component（组件色）
├── button-primary-bg
├── input-border
└── navbar-bg
| 色阶 | 用途 | 对应关系 |
|---|
| 50 | 极浅背景 | hover/selected 背景 |
| 100 | 浅背景 | 标签、徽章背景 |
| 200 | 边框、分隔线 | 输入框边框 |
| 300 | 禁用态、占位符 | placeholder |
| 400 | 次要图标、文本 | 说明文字 |
| 500 | 默认态 | 主要强调色 |
| 600 | hover 态 | 交互反馈 |
| 700 | active/pressed 态 | 按下状态 |
| 800 | 深色文本 | 深色模式文本 |
| 900 | 极深/标题 | 标题、强调 |
| 950 | 黑色 | 深色模式背景 |
| 等级 | 普通文本 | 大文本 (≥18pt/14pt bold) | 用途 |
|---|
| AA | ≥ 4.5:1 | ≥ 3:1 | 最低标准 |
| AAA | ≥ 7:1 | ≥ 4.5:1 | 增强标准 |
黑 #000000 on 白 #FFFFFF — 21:1 ✓ AAA
灰 #767676 on 白 #FFFFFF — 4.5:1 ✓ AA
蓝 #0066CC on 白 #FFFFFF — 5.9:1 ✓ AA
红 #D32F2F on 白 #FFFFFF — 5.6:1 ✓ AA
Primary: oklch(0.55 0.20 265) — 从 dynamic color 提取
On Primary: oklch(0.98 0.00 0)
Primary Container: oklch(0.85 0.12 265)
Surface: oklch(0.98 0.00 0)
特点：dynamic color（壁纸/图片提取品牌色）、tonal palette（13 级色调）
Brand Primary: #0078D4
Neutral Primary: #242424
Stroke 1: #D1D1D1
Surface: #FFFFFF
特点：中性为主、品牌色克制使用、强调可访问性
System Blue: #007AFF
Label: #000000
Secondary Label: #3C3C4399
Separator: #3C3C4349
System Gray: #8E8E93
特点：语义色命名、不强调品牌色、依赖系统自动适配深浅模式
- 不要简单反转：白底黑字反转成黑底白字会太刺眼
- 降低饱和度：深色背景上高饱和色会“发光“
- 使用灰色层级：#121212 → #1E1E1E → #2C2C2C → #383838
- 阴影变光晕：深色模式用发光（glow）替代阴影（shadow）
| 场景 | 浅色模式 | 深色模式 | 调整 |
|---|
| 背景 | #FFFFFF | #121212 | — |
| 表面 | #F5F5F5 | #1E1E1E | — |
| 主色 | blue-500 | blue-300 | 提高亮度 |
| 强调 | red-600 | red-400 | 降低饱和度 |
| 文本 | #1A1A1A | #E0E0E0 | — |
| 次要文本 | #666666 | #9E9E9E | — |
/* oklch — 感知均匀，最适合设计系统 */
:root {
--primary: oklch(0.55 0.20 265);
--primary-hover: oklch(0.48 0.22 265); /* 更暗 */
--primary-light: oklch(0.85 0.12 265); /* 更亮 */
}
/* color-mix — 原生混合，无需预计算 */
.btn-primary:hover {
background: color-mix(in oklch, var(--primary) 80%, black);
}
/* light-dark() — 浅深模式自动切换 */
:root {
color-scheme: light dark;
}
body {
color: light-dark(#1a1a1a, #e0e0e0);
background: light-dark(#ffffff, #121212);
}
/* relative color syntax — 相对色彩变换 */
:root {
--primary-h: oklch(from var(--primary) h s l);
--primary-saturate: oklch(from var(--primary) h calc(s * 1.2) l);
}
| 工具 | 用途 | 链接 |
|---|
| Realtime Colors | 实时预览配色在真实 UI 上的效果 | realtimecolors.com |
| Huemint | AI 生成配色方案 | huemint.com |
| ColorBox (Lyft) | 色阶生成器 | colorbox.io |
| Tints.dev | Tailwind 色阶生成 | tints.dev |
| Pigment (StackBlitz) | AI 配色 + 代码导出 | pigment.supply |
| Leonardo (Adobe) | 基于对比度的调色 | leonardocolor.io |
1. 选定一个主色（Primary）
2. 基于主色生成 10 级色阶（50–950）
3. 选择互补或类似色作为 Secondary
4. 灰色中性色（Neutral）用于文本和背景
5. 语义色：Success (绿)、Warning (橙)、Error (红)、Info (蓝)
6. 验证对比度（WCAG AA 最低）
7. 测试深色模式
| 错误 | 正确做法 |
|---|
| 纯黑 #000 作为文本色 | 使用 #1A1A1A 或 #212121 |
| 深色模式直接反转颜色 | 降低饱和度、提高亮度 |
| 只用一个主色 | 至少准备 primary + neutral |
| 忽略无障碍对比度 | 至少满足 WCAG AA |
| 硬编码颜色值 | 使用 CSS 变量 / Design Token |