我從事網站設計超過十年，如果我要說一件區分業餘設計和專業設計的因素，那就是顏色。不是你使用多少種顏色——而是你如何搭配這些顏色以及為什麼這樣做。我認識的大多數開發者（包括我早期的自己）要麼就是堅持使用安全的灰色搭配一個強調色，要麼就是選擇當下感覺不錯的顏色，但在成品中看起來很濁。

修正方法不是學習一本四百頁的色彩理論教科書。而是學習一種可靠的配色方案，並使用它直到變成習慣。對我來說，這個方案就是分割式補色。一旦你習慣了它，三角配色就是自然而然的下一步。讓我帶你深入了解這兩種。

目錄

分割式補色詳解：最佳初學者配色方案

什麼是分割式補色？

讓我們先從純粹的補色開始。在標準色輪上，補色位於彼此正對面——想想藍色和橙色、紅色和綠色、紫色和黃色。它們產生最大的對比度。問題是什麼？最大的對比度會感到具有攻擊性。藍橙色網站會向你吶喊。這是設計等同的爭執。

分割式補色採用這個理念並將其柔和化。不是使用與你的基色直接相反的顏色，而是使用補色相鄰的兩種顏色。所以如果你的基色是藍色，補色會是橙色。但與其用橙色，你會選擇黃橙和紅橙。

就是這樣。這就是整個概念。

結果是一個三色調色板，具有強烈的視覺對比（因為你仍在色輪的對面提取）但感覺更細緻、更不對抗。你得到張力但沒有衝突。

背後的幾何學

在 360 度色輪上：

  1. 選擇你的基本色調（例如 220° 用於深藍色）
  2. 找到補色：基色 + 180°（所以 40°，這是橙色）
  3. 不是 40°，而是去 30° 到任一側：10°（紅橙）和70°（黃橙）

標準分割是距補色 ±30°，儘管某些設計師使用 ±25° 或 ±35° 以獲得略微不同的感覺。沒有硬性規則——你的眼睛是最終的判官。

如何在色輪上找到分割式補色

你可以用 HSL 值手動完成此操作，這是我對開發者的建議，因為它直接映射到 CSS。這是心智模型：

基色：        H
補色：        H + 180°
分割 1：      H + 150°
分割 2：      H + 210°

等等——為什麼是 150° 和 210° 而不是補色 ±30°？這是一樣的，只是計算方式不同。(H + 180) - 30 = H + 150 和 (H + 180) + 30 = H + 210。這是色輪上的相同位置。

假設你的品牌顏色是 hsl(175, 65%, 45%) 的青色：

  • 基色： 175°
  • 分割 1： 175 + 150 = 325°（玫瑰色/洋紅）
  • 分割 2： 175 + 210 = 385° → 25°（溫暖的珊瑚色/橙色）

你的三色調色板：青色、玫瑰色和珊瑚色。這是一個華麗的組合，你不需要任何設計直覺就能得到它——只需要算術。

用我們的互動色輪自己試試。選擇任何基色，它會立即計算兩個分割。

為什麼分割式補色適合初學者

我建議每一個詢問我關於顏色的開發者使用分割式補色，原因如下：

幾乎不可能搞砸

補色方案會看起來刺耳。類似方案（色輪上彼此相鄰的顏色）會看起來褪色且缺乏對比。三角配色需要小心平衡。但分割式補色？它就是……可以。三種顏色之間的幾何關係保證了足夠的對比度用於視覺層次，而不會有直接補色的刺耳感。

它給你一個明確的主導顏色

使用三角配色時，所有三種色調都間距相等，這會使決定哪一個引領變得困難。在分割式補色方案中，一種顏色明確地是基色，另外兩種則扮演支持角色。這完美地映射到網頁設計，其中你需要：

  • 一個主要品牌顏色（基色）
  • 一個強調色用於 CTA 和互動元素（一個分割）
  • 一個次要強調色用於亮點、徽章或懸停狀態（另一個分割）

它可以優雅地縮小

在某些頁面上，你可能只使用三種顏色中的兩種。這仍然有效，因為每個分割自身與基色有很好的對比。你不會被鎖定在到處使用全部三種。

分割式補色詳解：最佳初學者配色方案 - 架構

CSS 中的分割式補色

這就是我通常如何使用 HSL 的 CSS 自訂屬性設置分割式補色調色板。HSL 是這裡的關鍵——它使色彩理論計算變得微不足道，因為色調只是色輪上的一個度數。

:root {
  /* 基本色調 */
  --hue-base: 220; /* 深藍色 */
  --hue-split-1: calc(var(--hue-base) + 150); /* ~10° 溫暖的紅橙色 */
  --hue-split-2: calc(var(--hue-base) + 210); /* ~70° 金黃色 */

  /* 主調色板 */
  --color-primary: hsl(var(--hue-base), 65%, 50%);
  --color-accent-warm: hsl(var(--hue-split-1), 70%, 55%);
  --color-accent-cool: hsl(var(--hue-split-2), 60%, 50%);

  /* 延伸調色板——更淺/更深的變體 */
  --color-primary-light: hsl(var(--hue-base), 65%, 90%);
  --color-primary-dark: hsl(var(--hue-base), 65%, 25%);
  --color-accent-warm-light: hsl(var(--hue-split-1), 70%, 92%);
  --color-accent-cool-light: hsl(var(--hue-split-2), 60%, 90%);

  /* 衍生自基色色調的中性色 */
  --color-bg: hsl(var(--hue-base), 10%, 98%);
  --color-surface: hsl(var(--hue-base), 8%, 100%);
  --color-text: hsl(var(--hue-base), 15%, 15%);
  --color-text-muted: hsl(var(--hue-base), 10%, 45%);
}

注意底部的那些中性色。我用基色色調的少量飽和度來著色白色和灰色。這是一個小細節，但會產生巨大的差異——你的背景不會與你的調色板斷開。這是你不會有意識地注意到的事情，但你的眼睛會注意到。

應用 60-30-10 規則

經典的室內設計比例在這裡完美地工作：

/* 60% — 主要/中性（背景、大型表面） */
.page-wrapper {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 30% — 基色（標題、導航、卡片） */
.site-header {
  background-color: var(--color-primary);
  color: white;
}

.card {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface);
}

/* 10% — 強調分割（CTA、亮點、徽章） */
.btn-cta {
  background-color: var(--color-accent-warm);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
}

.badge-new {
  background-color: var(--color-accent-cool-light);
  color: var(--color-accent-cool);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.link-highlight {
  color: var(--color-accent-warm);
  text-decoration: underline;
}

溫暖的強調色（紅橙）比金黃色更吸引眼睛，所以我用它來做主要 CTA。較涼爽的強調色適用於次要元素。這不是硬性規則——測試兩者，看看你特定的色調看起來如何。

使用分割式補色的真實網頁設計示例

讓我們看看真實網站如何使用這個方案，即使他們不這樣稱呼它。

示例 1：SaaS 儀表板（藍色基色）

  • 基色： 藍色 (#3B82F6) — 導航、標題、主要按鈕
  • 分割 1： 溫暖的琥珀色 (#F59E0B) — 警告狀態、升級 CTA、活躍指示符
  • 分割 2： 玫瑰色 (#F43F5E) — 錯誤狀態、通知徽章、刪除操作

這本質上是 Tailwind CSS 的預設調色板所啟用的。藍色作為你的主要，琥珀色和玫瑰色作為你的強調。無論 Tailwind 團隊是否想要它，這都是分割式補色。

示例 2：電子商務（綠色基色）

  • 基色： 森林綠 (#16A34A) — 品牌標識、「加入購物車」按鈕
  • 分割 1： 溫暖的紅色 (#DC2626) — 促銷標籤、緊迫指示符
  • 分割 2： 紫色 (#7C3AED) — 忠誠度計劃徽章、高級產品亮點

示例 3：作品集網站（紫色基色）

  • 基色： 紫色 (#8B5CF6) — 標題、英雄部分
  • 分割 1： 青色 (#14B8A6) — 鏈接、互動元素
  • 分割 2： 石灰色 (#84CC16) — 成功狀態、精選項目徽章

看到模式了嗎？基色為品牌身份做重頭戲，而兩個分割則處理需要從基色脫穎而出的支持角色。

什麼是三角配色？

三角配色是三種色調，在色輪上以 120° 間隔均勻間隔。如果分割式補色是色輪上的等腰三角形，那麼三角配色就是等邊三角形。

基色：       H
三角配色 1： H + 120°
三角配色 2： H + 240°

經典的三角配色組合：

  • 紅色、黃色、藍色（原色——這是最著名的三角配色組）
  • 橙色、綠色、紫色（次級色）
  • 青色、洋紅、金色

你可以在我們的三角配色工具上探索三角配色和諧。

CSS 中的三角配色

:root {
  --hue-base: 0; /* 紅色 */
  --hue-triadic-1: calc(var(--hue-base) + 120); /* 120° 綠色 */
  --hue-triadic-2: calc(var(--hue-base) + 240); /* 240° 藍色 */

  --color-primary: hsl(var(--hue-base), 70%, 50%);
  --color-secondary: hsl(var(--hue-triadic-1), 60%, 42%);
  --color-tertiary: hsl(var(--hue-triadic-2), 65%, 50%);
}

三角配色方案大膽。它們充滿活力。它們也更難控制。因為所有三種顏色在預設情況下都具有相等的視覺權重，你必須更有意地注意你使用多少種顏色。Google 的品牌顏色（紅、黃、藍、綠）本質上是一個雙三角配色方案，跨產品製造它需要數百人的設計團隊。

分割式補色 vs 三角配色：何時使用各自

以下是我對何時每個方案有意義的誠實看法：

因素 分割式補色 三角配色
難度 初學者友好 中級
對比度級別 高，但受控 非常高，相等的張力
主導顏色 內置（基色） 無自然主導——你選擇
最適合 商業網站、SaaS、部落格、作品集 創意代理、兒童品牌、遊戲、娛樂
看起來刺耳的風險 低 中等到高如果管理不當
色彩平衡 60-30-10 自然映射 需要小心的比例決定
多功能性 適用於任何飽和度 需要去飽和或著色以感到專業
情感基調 精緻、親切 好玩、動態、大膽

何時選擇分割式補色

  • 你在建立專業或公司網站
  • 你希望一種顏色主導品牌身份
  • 你需要調色板與大量文本內容配合（部落格、文件）
  • 客戶沒有給你品牌指南，你需要一個安全的起點
  • 你在從事無頭 CMS 項目，內容編輯者可能會添加需要與 UI 顏色配合的圖像

何時選擇三角配色

  • 品牌本質上是好玩或年輕的
  • 你正在為娛樂、遊戲或兒童產品設計
  • 設計主要依賴於插圖或動畫
  • 你有強大的設計技巧，想推動創意邊界
  • 你正在建立創意作品集或代理網站

對於我們在 Social Animal 建立的大多數 Next.js 項目和 Astro 網站，分割式補色是預設推薦。它與內容豐富的佈局配對良好，其中可讀性比視覺華麗更重要。

應用色彩和諧的實用技巧

技巧 1：大方地去飽和

來自色輪的原始色調對大多數網頁介面來說太強烈了。將飽和度下拉到 50-70%，用於主要顏色，甚至對背景更低。高飽和度適用於小強調——按鈕、徽章、圖標。它不適用於 1200px 寬的標題。

技巧 2：使用 OKLCH 而不是 HSL 用於感知均勻性

HSL 有個骯髒的秘密：它的亮度值不對應於人們實際感知亮度的方式。hsl(60, 100%, 50%) 的黃色看起來遠比 hsl(240, 100%, 50%) 的藍色亮得多，即使兩者都是「50% 亮度」。OKLCH 修復了這個。

:root {
  /* OKLCH 給出感知均勻的亮度 */
  --color-primary: oklch(55% 0.15 220);
  --color-accent-warm: oklch(55% 0.18 10);
  --color-accent-cool: oklch(55% 0.14 70);
  /* 所有三個實際上看起來同樣亮 */
}

截至 2025 年，OKLCH 有出色的瀏覽器支援（全球 96% 以上）。如果可以，使用它。

技巧 3：檢查對比度比率

色彩和諧不會覆蓋可訪問性。每個文本在背景上的組合需要滿足 WCAG 2.2 對比度比率——正常文本 4.5:1，大型文本 3:1。像WebAIM 對比度檢查器或內置的 Chrome DevTools 對比度檢查器這樣的工具是必不可少的。

技巧 4：用真實內容測試

我無法告訴你有多少美麗的調色板當你添加真實照片、用戶頭像和產品圖像時崩潰。始終用真實內容測試你的配色方案。一個分割式補色調色板為青色、玫瑰和珊瑚可能與一個主要是鮭魚色的英雄圖像發生可怕的衝突。盡早用生產內容模擬它。

技巧 5：建立深色模式變體

兩個方案都很好地轉換為深色模式，如果你調整亮度和飽和度：

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: hsl(var(--hue-base), 55%, 65%);
    --color-accent-warm: hsl(var(--hue-split-1), 60%, 65%);
    --color-bg: hsl(var(--hue-base), 15%, 10%);
    --color-surface: hsl(var(--hue-base), 12%, 15%);
    --color-text: hsl(var(--hue-base), 10%, 90%);
  }
}

在深色模式中，你通常想要增加前景顏色的亮度和稍微降低飽和度。深色背景上的明亮、飽和顏色會造成眼睛疲勞。

FAQ

什麼是分割式補色配色方案？ 分割式補色方案使用三種顏色：一個基色加上其在色輪上的補色相鄰的兩種顏色。與其選擇與你的基色直接相反的顏色（這是標準補色），你選擇那個補色的兩個鄰居，通常每側 30°。這給你強烈的對比，張力比純補色對少得多。

你如何在色輪上找到分割式補色？ 從你的基色的色調值開始，單位為度（0-360）。添加 150° 以獲得你的第一個分割，並添加 210° 以獲得你的第二個分割。如果結果超過 360°，減去 360°。例如，220° 的基色（藍色）給你 10°（紅橙）和 70°（黃橙）的分割。你可以用 CSS 中的 HSL 值手動完成此操作，或使用我們的免費色輪工具以視覺方式計算它。

分割式補色和三角配色之間的區別是什麼？ 分割式補色使用一個基色和兩個顏色接近其補色（距基色 150° 和 210°）。三角配色使用三種顏色，以 120° 間隔均勻間隔。關鍵區別是平衡：分割式補色有明確的主導顏色，而三角配色同等對待所有三種顏色。分割式補色往往感到更精緻；三角配色感到更充滿活力。

為什麼分割式補色比補色對於網頁設計更好？ 直接補色方案（色輪上彼此直接相反的兩種顏色）產生最大的對比，這在大量使用時會感到具有攻擊性或很難看。分割式補色保持大部分那個對比，同時添加第三種顏色以增加多樣性並軟化整體效果。它用三種顏色而不是兩種給你更多的設計靈活性，並且創建視覺層次容易得多。

我可以將分割式補色與 Tailwind CSS 一起使用嗎？ 絕對可以。在 tailwind.config.js 中的 theme.extend.colors 下定義你的三種色調，然後在你的標記中使用它們。Tailwind 的預設調色板意外地包含幾個分割式補色組——藍色/琥珀/玫瑰是開發者最常到達的。你也可以在 v4 中使用 Tailwind 的 oklch() 支援用於感知均勻的色彩計算。

一個網站實際上應該使用多少種顏色？ 大多數專業網站最多使用 3-5 種色調，加上中性變體（用基色著色的灰色）。分割式補色方案給你恰好 3 種色調，這是最佳點。從那 3 種，你生成用於背景、邊框和懸停狀態的更淺和更深的變體。60-30-10 規則是一個很好的起點框架：60% 中性/基色，30% 主要，10% 強調。

三角配色對專業/公司網站有效嗎？ 可以，但需要更多技能。關鍵是重度去飽和和小心的比例管理。如果你以全飽和度和相等數量使用所有三種三角配色，你會得到一個看起來像兒童玩具的設計。大幅地使兩種色調的飽和度降低，並謹慎地使用它們。對於大多數公司或 SaaS 項目，分割式補色是更安全的，通常更好的選擇。

什麼工具可以幫助我挑選分割式補色和三角配色調色板？ 我們的互動色輪讓你立即視覺化兩種和諧。其他堅實的工具包括 Coolors（coolors.co）、Adobe Color 和 Realtime Colors by Juxtopposed，它讓你在實時網站模擬上預覽調色板。對於開發者，我也會推薦 VS Code 擴展「Color Highlight」，所以你可以在編碼時看到你的調色板值內聯。