色彩調色盤設計技巧：打造和諧的色彩組合

精心挑選的色彩調色盤能讓設計從業餘提升到專業水準。色彩理論提供了框架，但有效地運用它需要理解色彩選擇背後的科學和心理學。本指南涵蓋建立實用調色盤的原則與實務技巧。

色輪與色彩關係

所有色彩和諧規則都基於色輪上的位置 — 一個圓形排列的色相環，相鄰的顏色平滑過渡，對面的顏色產生對比。

互補色

色輪上直接對立的顏色。它們產生最大的對比度和視覺張力。

• 範例：藍色（#2563EB）和橘色（#EA580C）
• 適用於：行動呼籲按鈕、強調元素、重點標示
• 注意：在全飽和度下並排使用互補色可能會產生視覺振動感。請調低其中一個的飽和度。

類比色

色輪上相鄰的三到五個顏色。它們營造平靜、和諧的設計。

• 範例：藍色（#2563EB）、藍紫色（#7C3AED）、紫色（#9333EA）
• 適用於：背景、大面積區域、品牌一致性
• 技巧：選擇一個主色、一個輔助色和一個強調色

三色配色

色輪上等距分布的三個顏色（相隔 120°）。鮮明且平衡。

• 範例：紅色（#DC2626）、黃色（#CA8A04）、藍色（#2563EB）
• 適用於：活潑的設計、兒童產品、資料視覺化分類

分裂互補色

一個基色加上其互補色兩側的兩個顏色。比純互補色的張力更小。

• 範例：藍色（#2563EB）、紅橘色（#EA580C）、黃橘色（#CA8A04）
• 適用於：需要對比但不需要互補配色強度的設計

使用我們的色彩調色盤產生器自動產生這些配色方案。

60-30-10 法則

在任何設計中套用顏色的最可靠比例：

• 60%：主色/主導色（背景、大面積區域）
• 30%：輔助色（卡片、面板、輔助元素）
• 10%：強調色（按鈕、高亮、連結）

:root {
  --primary: #F8FAFC;     /* 60% - 淺色背景 */
  --secondary: #1E293B;   /* 30% - 深色表面 */
  --accent: #3B82F6;      /* 10% - 互動元素 */
}

這個比例反映了室內設計師的工作方式 — 出於同樣的心理學原因。主色確立氛圍，輔助色提供結構，強調色吸引注意力。

從零開始建立調色盤

步驟一：從品牌或氛圍開始

選擇一個代表品牌或氛圍的基色：

• 藍色：信任、專業、科技
• 綠色：成長、健康、自然
• 紫色：奢華、創意、智慧
• 紅色：活力、緊迫、熱情
• 橘色：溫暖、熱忱、親民

步驟二：產生色彩變化

使用 HSL 操作建立基色的 9-10 個色階。保持色相不變，調整飽和度和明度：

--blue-50:  hsl(217, 91%, 97%);
--blue-100: hsl(217, 91%, 93%);
--blue-200: hsl(217, 91%, 85%);
--blue-300: hsl(217, 91%, 75%);
--blue-400: hsl(217, 91%, 65%);
--blue-500: hsl(217, 91%, 60%);  /* 基色 */
--blue-600: hsl(217, 91%, 50%);
--blue-700: hsl(217, 91%, 40%);
--blue-800: hsl(217, 91%, 30%);
--blue-900: hsl(217, 91%, 20%);

如需瞭解 HSL 和其他色彩格式，請參閱我們的色彩格式指南。

步驟三：加入中性色

每個調色盤都需要灰色系列。建立與基色互補的暖灰或冷灰色階：

/* 冷灰色（搭配藍色基色） */
--gray-50:  hsl(210, 20%, 98%);
--gray-100: hsl(210, 16%, 93%);
--gray-500: hsl(210, 10%, 53%);
--gray-900: hsl(210, 24%, 10%);

步驟四：加入語意色彩

用於成功、警告、錯誤和資訊狀態的顏色：

--success: hsl(142, 76%, 36%);  /* 綠色 */
--warning: hsl(38, 92%, 50%);   /* 琥珀色 */
--error:   hsl(0, 84%, 60%);    /* 紅色 */
--info:    hsl(199, 89%, 48%);  /* 青色 */

無障礙要求

對比度（WCAG 2.1）

色覺障礙

8% 的男性有某種形式的色覺缺陷。絕對不要僅用顏色來傳達資訊：

• 在顏色指示旁加入圖示或圖案
• 使用足夠的亮度對比（即使在灰階下也有效）
• 使用色覺障礙模擬器進行測試

深色模式調色盤策略

不要只是反轉你的淺色調色盤。深色模式需要自己的考量：

1. 背景：使用深灰色（#111827），而非純黑色（#000000）。純黑色會造成過於強烈的對比。
2. 文字：使用偏白色（#F9FAFB），而非純白色（#FFFFFF），以減少眼睛疲勞。
3. 強調色：將明度提高 10-15% 以確保在深色背景上的可見性。
4. 陰影：使用較淺的陰影或微妙的光暈效果，而非深色陰影。

/* 淺色模式 */
--bg: hsl(0, 0%, 100%);
--text: hsl(0, 0%, 10%);
--accent: hsl(217, 91%, 60%);

/* 深色模式 */
--bg: hsl(220, 20%, 10%);
--text: hsl(0, 0%, 95%);
--accent: hsl(217, 91%, 70%);  /* 在深色模式中更亮 */

調色盤建立工具

• 我們的色彩調色盤產生器能從任何基色建立和諧的調色盤
• 我們的色彩轉換器可在 HEX、RGB 和 HSL 之間轉換
• 我們的漸層產生器能建立調色盤色彩之間的平滑過渡

常見問題

設計調色盤應該包含多少顏色？

一個完整的設計系統通常包含：1 個主色（含 9-10 個色階）、1-2 個強調色、一組中性灰色系列（9-10 個色階），以及 4 個語意色彩（成功、警告、錯誤、資訊）。總計約 40-50 個色彩值，但它們全都衍生自 3-4 個基本色相。

應該先設計淺色模式還是深色模式？

先設計淺色模式。在淺色背景上搭配深色文字更容易建立可讀性和對比度。然後透過調整明度值來衍生你的深色模式調色盤。大多數色彩無障礙問題在淺色模式中更容易識別和修正。

相關資源

• 色彩調色盤產生器 — 從任何基色產生調色盤
• 色彩格式詳解 — 瞭解 HEX、RGB 和 HSL
• CSS 漸層指南 — 使用調色盤色彩建立漸層