调色板与配色指南：从色彩理论到专业级 UI 配色实战

色彩理论基础

HSL 色彩模型

H（Hue）色相：0-360°，色相环上的角度
S（Saturation）饱和度：0-100%，灰→纯色
L（Lightness）明度：0-100%，黑→白

色相值	颜色
0° / 360°	红色
60°	黄色
120°	绿色
180°	青色
240°	蓝色
300°	品红

色相环

         0° 红
    300°       60°
   品红         黄
  240°         120°
    蓝          绿
        180° 青

---

五种经典配色方案

1. 单色配色（Monochromatic）

同一色相，不同饱和度和明度。

:root {
  --primary-50: hsl(220, 100%, 97%);   /* 极浅蓝 */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* 基础蓝 */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* 极深蓝 */
}

适用：简洁、专业、品牌感强

2. 类似色配色（Analogous）

色相环上相邻 30° 的颜色。

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* 蓝 */
  --analogous-2: hsl(220, 80%, 50%);  /* 蓝紫 */
  --analogous-3: hsl(240, 80%, 50%);  /* 紫 */
}

适用：和谐、自然、温暖

3. 互补色配色（Complementary）

色相环上相对 180° 的颜色。

:root {
  --primary: hsl(220, 80%, 55%);    /* 蓝 */
  --complement: hsl(40, 80%, 55%);  /* 橙 */
}

适用：高对比、引人注目、CTA 按钮

4. 三角配色（Triadic）

色相环上等距 120° 的三个颜色。

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* 红 */
  --triadic-2: hsl(120, 70%, 55%);  /* 绿 */
  --triadic-3: hsl(240, 70%, 55%);  /* 蓝 */
}

适用：活泼、多彩、儿童产品

5. 分裂互补配色（Split-Complementary）

互补色两侧各 30°。

:root {
  --primary: hsl(220, 80%, 55%);     /* 蓝 */
  --split-1: hsl(10, 80%, 55%);      /* 红橙 */
  --split-2: hsl(50, 80%, 55%);      /* 黄橙 */
}

适用：丰富但不混乱、比互补色更柔和

---

WCAG 对比度标准

对比度计算

对比度 = (L1 + 0.05) / (L2 + 0.05)

L1 = 较亮色的相对亮度
L2 = 较暗色的相对亮度

相对亮度计算：
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
（R/G/B 需要先做 sRGB 线性化）

WCAG 2.1 标准

级别	正文文本	大文本	UI 组件
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	-

大文本：≥18pt（24px）或 ≥14pt 粗体

JavaScript 检查对比度

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

---

生成专业调色板

Tailwind CSS 风格的色阶

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// 生成蓝色调色板
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

OKLCH 色彩空间（更均匀）

/* OKLCH 比 HSL 感知更均匀 */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}

色彩空间	感知均匀性	浏览器支持
HSL	❌ 不均匀	全部
OKLCH	✅ 均匀	Chrome 111+, Safari 15.4+
OKLAB	✅ 均匀	Chrome 111+, Safari 15.4+

---

暗色模式配色

/* 亮色 */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* 暗色：不要简单反转，而是降低对比度 */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

暗色模式配色原则

1. 不要用纯黑 #000：用 #111827 等深灰
2. 降低主色饱和度：暗色下高饱和度刺眼
3. 保持对比度 ≥ 4.5:1：WCAG AA 标准
4. 阴影改用更深的背景层：暗色下阴影不可见

---

经典调色板参考

科技/SaaS

主色：#3b82f6 (蓝 500)
辅色：#8b5cf6 (紫 500)
强调：#06b6d4 (青 500)
背景：#f8fafc
文字：#0f172a

电商/消费

主色：#f97316 (橙 500)
辅色：#ef4444 (红 500)
强调：#22c55e (绿 500)
背景：#ffffff
文字：#1f2937

金融/专业

主色：#1e40af (蓝 800)
辅色：#059669 (绿 600)
强调：#d97706 (黄 600)
背景：#f9fafb
文字：#111827

---

使用工具库生成配色

1. 打开 颜色转换工具 或 渐变生成器
2. 选择基础颜色
3. 自动生成色阶（50-900）
4. 检查对比度是否满足 WCAG AA
5. 预览暗色模式效果
6. 复制 CSS 变量代码

---

常见问题

为什么我的配色看起来"脏"？

HSL 在高/低明度时饱和度感知不一致。用 OKLCH 色彩空间生成更干净的色阶。

暗色模式下颜色太刺眼？

降低饱和度 20-30%，提高明度 5-10%：

/* 亮色 */
--primary: hsl(220, 80%, 55%);

/* 暗色：降低饱和度 */
--primary: hsl(220, 60%, 65%);

如何确保色盲友好？

• 不要仅靠颜色传达信息（加图标/文字）
• 红绿配色对色盲不友好，用蓝橙替代
• 用 色盲模拟器 测试

---

总结

好的配色来自色彩理论 + 对比度标准 + 实际测试。掌握五种经典配色方案、WCAG 对比度标准、OKLCH 色彩空间，就能生成专业级调色板。记住：配色不是艺术，是工程——有标准可循，有工具可量。