調色盤與配色指南：從色彩理論到專業級 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;
}

深色模式配色原則

不要用純黑 #000：用 #111827 等深灰
降低主色飽和度：深色下高飽和度刺眼
保持對比度 ≥ 4.5:1：WCAG AA 標準
陰影改用更深的背景層：深色下陰影不可見

經典調色盤參考

科技/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

使用工具庫產生配色

開啟顏色轉換工具或漸層產生器
選擇基礎顏色
自動產生色階（50-900）
檢查對比度是否滿足 WCAG AA
預覽深色模式效果
複製 CSS 變數程式碼

常見問題

為什麼我的配色看起來「髒」？

HSL 在高/低明度時飽和度感知不一致。用 OKLCH 色彩空間產生更乾淨的色階。

深色模式下顏色太刺眼？

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

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

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

如何確保色盲友善？

不要僅靠顏色傳達資訊（加圖示/文字）
紅綠配色對色盲不友善，用藍橙替代
用色盲模擬器測試

總結

好的配色來自色彩理論 + 對比度標準 + 實際測試。掌握五種經典配色方案、WCAG 對比度標準、OKLCH 色彩空間，就能產生專業級調色盤。記住：配色不是藝術，是工程——有標準可循，有工具可量。