色彩理论与配色方案完整指南

色彩模型基础

RGB 模型（加色模型）

RGB 模型 - 用于屏幕显示

┌──────────────────────────┐
│  红 (R: 0-255)           │
│  绿 (G: 0-255)           │
│  蓝 (B: 0-255)           │
└──────────────────────────┘

颜色组成方式：
纯红    RGB(255, 0, 0)
纯绿    RGB(0, 255, 0)
纯蓝    RGB(0, 0, 255)
白色    RGB(255, 255, 255)
黑色    RGB(0, 0, 0)
黄色    RGB(255, 255, 0)

HEX 格式

十六进制颜色代码

#RRGGBB 或 #RGB

示例：
#FF0000 = 纯红
#00FF00 = 纯绿
#0000FF = 纯蓝
#FFFFFF = 白色
#000000 = 黑色
#3498DB = 天蓝色

HSL 模型（直观模型）

HSL - 更符合人类直觉

H (Hue) - 色相 (0-360°)
  ├─ 0° = 红色
  ├─ 120° = 绿色
  ├─ 240° = 蓝色
  └─ 360° = 回到红色

S (Saturation) - 饱和度 (0-100%)
  ├─ 0% = 灰色（无色）
  └─ 100% = 纯色

L (Lightness) - 亮度 (0-100%)
  ├─ 0% = 黑色
  ├─ 50% = 标准颜色
  └─ 100% = 白色

示例：
hsl(0, 100%, 50%)   = 纯红
hsl(120, 100%, 50%) = 纯绿
hsl(240, 100%, 50%) = 纯蓝

色彩心理学

颜色的情感关联

对比度和可读性

WCAG 对比度标准

对比度要求（文本与背景）：

等级 AA（推荐）
├─ 常规文本：4.5:1
├─ 大型文本（18pt+）：3:1
└─ 使用场景：大多数网站

等级 AAA（最佳）
├─ 常规文本：7:1
├─ 大型文本：4.5:1
└─ 使用场景：医疗、金融

计算公式：
相对亮度差值 / 较暗的相对亮度
结果在 1:1（最小）到 21:1（最大）之间

对比度检查

// 计算对比度
const getLuminance = (r, g, b) => {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

const getContrast = (rgb1, rgb2) => {
  const l1 = getLuminance(rgb1.r, rgb1.g, rgb1.b)
  const l2 = getLuminance(rgb2.r, rgb2.g, rgb2.b)
  
  const lighter = Math.max(l1, l2)
  const darker = Math.min(l1, l2)
  
  return (lighter + 0.05) / (darker + 0.05)
}

// 检查文本色与背景色的对比度
const contrast = getContrast(
  { r: 255, g: 0, b: 0 },      // 红色文本
  { r: 255, g: 255, b: 255 }   // 白色背景
)
console.log(`对比度：${contrast.toFixed(2)}:1`)  // 3.99:1 ✓ AA 等级

配色方案

1. 单色方案（Monochromatic）

使用同一色相的不同饱和度和亮度

基础颜色：#3498DB（蓝色）

配色：
├─ 浅色：hsl(204, 70%, 85%)  - 背景
├─ 中色：hsl(204, 70%, 65%)  - 次要文本
├─ 标准：hsl(204, 70%, 45%)  - 主要文本
└─ 深色：hsl(204, 70%, 25%)  - 强调

CSS 生成
:root {
  --primary-light: #eef5fb;
  --primary: #3498db;
  --primary-dark: #2980b9;
}

2. 互补方案（Complementary）

使用色轮上相对的两种颜色

基础颜色：#3498DB（蓝色 240°）
互补颜色：#E67E22（橙色 60°）

特点：
✅ 对比度高，视觉效果强
✅ 适合强调重点
❌ 过度使用会显得生硬

应用：
- 主要：蓝色
- 强调：橙色

3. 类似方案（Analogous）

使用色轮上相邻的 2-3 种颜色

基础颜色组：
├─ 黄色    hsl(60°, 100%, 50%)
├─ 绿色    hsl(120°, 100%, 50%)
└─ 青色    hsl(180°, 100%, 50%)

特点：
✅ 和谐统一
✅ 舒适自然
✅ 适合大面积使用

应用：
- 背景、主体、辅助

4. 三角配色方案（Triadic）

使用色轮上均匀分布的三种颜色（120° 间隔）

配置 1：
├─ 红色：hsl(0°, 100%, 50%)
├─ 黄色：hsl(120°, 100%, 50%)
└─ 蓝色：hsl(240°, 100%, 50%)

配置 2（推荐）：
├─ 蓝色：hsl(210°, 100%, 50%)
├─ 黄色：hsl(30°, 100%, 50%)
└─ 红色：hsl(330°, 100%, 50%)

特点：
✅ 视觉丰富
✅ 平衡统一
✓ 适合多色应用

实用配色方案

方案 1：现代蓝色系（推荐）

:root {
  /* 主色 */
  --primary: #3498DB;        /* 天蓝色 */
  --primary-dark: #2980B9;   /* 深蓝 */
  --primary-light: #5DADE2;  /* 浅蓝 */
  
  /* 强调色 */
  --accent: #E74C3C;         /* 红色 */
  --accent-light: #EC7063;   /* 浅红 */
  
  /* 中性色 */
  --text-primary: #2C3E50;   /* 深灰（主文本）*/
  --text-secondary: #7F8C8D; /* 中灰（次文本）*/
  --text-tertiary: #BDC3C7;  /* 浅灰（提示文本）*/
  
  --bg-primary: #FFFFFF;     /* 白色（主背景）*/
  --bg-secondary: #ECF0F1;   /* 浅灰（次背景）*/
  --bg-tertiary: #D5DBDB;    /* 深灰（分割线）*/
  
  /* 功能色 */
  --success: #27AE60;        /* 绿色 */
  --warning: #F39C12;        /* 黄色 */
  --error: #E74C3C;          /* 红色 */
  --info: #3498DB;           /* 蓝色 */
}

方案 2：深色模式配置

[data-theme="dark"] {
  --primary: #00D4FF;        /* 亮蓝 */
  --primary-dark: #0099CC;   /* 蓝 */
  --primary-light: #33E0FF;  /* 浅亮蓝 */
  
  --accent: #FF6B6B;         /* 亮红 */
  
  --text-primary: #FFFFFF;   /* 白色 */
  --text-secondary: #B0B8C1; /* 浅灰 */
  --text-tertiary: #6B7280;  /* 深灰 */
  
  --bg-primary: #0F1419;     /* 深黑 */
  --bg-secondary: #1A1F2E;   /* 灰黑 */
  --bg-tertiary: #2D3748;    /* 浅黑 */
  
  --success: #48BB78;        /* 亮绿 */
  --warning: #FBD38D;        /* 亮黄 */
  --error: #FC8181;          /* 亮红 */
  --info: #63B3ED;           /* 亮蓝 */
}

配色工具

常见配色错误

// ❌ 错误做法 vs ✅ 正确做法

// 错误 1: 忽视对比度
❌ 灰色文本 (#999) 在浅灰背景 (#EEE) 上
   对比度：2.1:1 （不符合 AA 标准）

✅ 深灰文本 (#333) 在白色背景上
   对比度：8.6:1 （符合 AAA 标准）

// 错误 2: 过度饱和
❌ 使用纯饱和度 100% 的多种颜色
   显得廉价、刺眼

✅ 降低整体饱和度到 60-80%
   更专业、更舒适

// 错误 3: 颜色数量过多
❌ 使用 7+ 种主要颜色
   显得混乱、不专业

✅ 限制在 3-4 种主要颜色
   + 若干灰阶
   显得统一、专业

// 错误 4: 颜色使用不一致
❌ 链接在不同地方用不同颜色
   用户困惑

✅ 链接始终使用同一颜色
   用户清晰

// 错误 5: 仅用颜色表达信息
❌ 红色 = 错误，绿色 = 成功
   色盲用户无法理解

✅ 颜色 + 文本标签 + 图标
   所有用户都能理解

无障碍色彩设计

色盲友好的设计

/* ❌ 不好的组合 */
.not-good {
  color: #FF0000;        /* 红色 */
  background-color: #00FF00; /* 绿色 */
}
/* 红绿色盲患者看不出区别 */

/* ✅ 推荐的做法 */
.good {
  color: #0066CC;        /* 蓝色 */
  background-color: #FFFF99; /* 黄色 */
  /* 或添加图标和文本标签 */
}

最佳实践

1. 不仅用颜色区分信息
   ├─ 添加文本标签
   ├─ 使用图标
   └─ 使用纹理/图案

2. 确保充足的对比度
   ├─ 文本 vs 背景：4.5:1+ (AA)
   ├─ UI 组件边界：3:1+
   └─ 测试工具：WebAIM

3. 考虑多种色盲类型
   ├─ 红绿色盲（最常见）
   ├─ 蓝黄色盲
   └─ 完全色盲（罕见）

4. 测试你的设计
   ├─ 使用模拟器检查
   ├─ 真实用户测试
   └─ 自动化检查工具

CSS 颜色管理最佳实践

/* 使用 CSS 变量管理颜色 */
:root {
  --color-primary: #3498DB;
  --color-secondary: #E74C3C;
  --color-text: #2C3E50;
  --color-bg: #FFFFFF;
}

/* 使用变量而不是硬编码 */
.button {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: 2px solid var(--color-primary);
}

.button:hover {
  background-color: var(--color-secondary);
}

/* 主题切换 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #00D4FF;
    --color-text: #FFFFFF;
    --color-bg: #0F1419;
  }
}

总结

色彩设计的核心原则：

1. 对比度 - 确保可读性，遵循 WCAG 标准
2. 一致性 - 相同元素使用相同颜色
3. 目的 - 每种颜色都有明确的用途
4. 简化 - 限制调色板的颜色数量
5. 可访问性 - 不仅用颜色表达信息
6. 测试 - 在真实环境和不同设备上测试

推荐资源

• Google Material Design 色彩系统
• WCAG 颜色对比度指南
• Coolors.co 配色工具
• Adobe Color Wheel