一個配色產生器，能輸出可直接使用的 CSS 程式碼，只要輸入一個基礎 HEX 顏色，就能透過經典的色環關係產生一整套和諧的顏色。你不需要手動旋轉色相或猜測配色，只需挑選一個基礎顏色（例如 #3b82f6），再選擇一種配色方案——互補色、類似色、三等分色、四等分色、分裂互補色或單色調——就能立即獲得一組包含 HEX、RGB 與 HSL 值的調色盤。每個色塊都可點擊，會將其 HEX 值複製到剪貼簿，方便直接用於 CSS、設計工具或品牌風格指南中。這種做法消除了試誤法選色的過程，確保數學上精準的關係以維持視覺和諧。舉例來說，互補色方案將色旋轉 180° 以產生高對比的重點色，而類似色方案則偏移 ±30° 以得到自然且協調的組合。產生器使用 HSL 色彩空間，其中色相是一個 0–360° 的圓形，可在不改變飽和度或亮度的情況下進行可預測的旋轉——不像 RGB 會以難以預測的方式混合色彩通道。一切都在你的瀏覽器中執行，因此顏色不會被上傳或儲存，也不需要任何帳號。
設計師與開發者經常需要為 UI 元件、資料視覺化、標誌或情緒板準備調色盤。常見的工作流程是以品牌色作為基礎，產生一組互補或三等分配色作為重點色，再切換到單色調來建立中性色調的深淺變化。例如，像 #2563eb（深藍色）這樣的品牌色，與其互補色 #ebae25（暖橘色）搭配，能創造出極具活力的對比，非常適合用於行動呼籲按鈕。同時，以同一基礎色建立的單色調方案，則可提供用於背景、邊框與 hover 狀態的較淺與較深變體。雖然產生器能確保和諧，但依據 WCAG 指南檢查對比度仍然相當重要——視覺上令人愉悅的調色盤並不代表一定具備無障礙性。該工具基於 HSL 的計算也能正確處理色相的循環（例如，350° 的色相加上 30° 會落在 20°，而不是 380°），確保結果在數學上精確且可預測。
配色方案在 CSS 中如何運作
CSS 使用 HEX、RGB 與 HSL 色彩格式，配色產生器為每個色塊都提供了這三種格式。HEX（#rrggbb）最為精簡且廣泛支援，而 RGB（rgb(red, green, blue)）與 HSL（hsl(hue, saturation%, lightness%)）則提供更高的控制彈性。HSL 特別適合用於微調調色盤，因為它將色相（實際顏色）與飽和度（強度）、亮度（明暗）分開。舉例來說，在 HSL 中旋轉色相同時保持飽和度與亮度不變，會產生感覺相關的顏色；而調整 RGB 通道則可能產生混濁或不一致的結果。產生器中的方案——互補色、類似色、三等分色等——都是透過在 HSL 空間中旋轉色相所導出，確保關係忠於色彩理論。以下是每種方案在實務上的運作方式：
| 方案 | 色旋轉 | 在 CSS 中的使用情境 | 範例（基礎色：#3b82f6） |
|---|---|---|---|
| 互補色 | +180° | 高對比重點色（按鈕、連結） | #f6af3b |
| 類似色 | ±30° | 協調的背景、漸層 | #3bf6d7, #3b56f6 |
| 三等分色 | ±120° | 平衡且鮮明的 UI 元件 | #f63b82, #82f63b |
| 四等分色 | +90°, +180°, +270° | 豐富的雙對配色（圖表、插圖） | #3bf682, #f6af3b, #823bf6 |
| 分裂互補色 | +150°, +210° | 較柔和的對比（卡片、徽章） | #3bf682, #f63b82 |
| 單色調 | 0°（亮度階梯） | 色調階梯（陰影、邊框、hover 狀態） | #1e40af, #60a5fa, #dbeafe |
上表說明每種方案如何將基礎色（#3b82f6）轉換為可直接使用的 CSS 調色盤。互補色與三等分色方案適合用於以對比為關鍵的動態介面，而類似色與單色調方案則適合用於細微且協調的設計。四等分色與分裂互補色方案提供更多變化，對於需要多種不同顏色的資料視覺化或插圖特別有用。產生器的輸出包含所有三種 CSS 相容格式，因此你可以視情況選擇使用 HEX 以求簡潔、使用 RGB 以支援 alpha 通道（rgba()），或使用 HSL 以便直接在樣式表中微調飽和度與亮度。
逐步產生 CSS 調色盤
若要從單一 HEX 代碼建立可直接使用的 CSS 調色盤，請依照下列步驟，使用配色產生器：
- 選擇基礎顏色：點擊色彩選擇器，或在輸入欄位中輸入 HEX 值（例如 #3b82f6）。選擇器支援任何有效的六位數 HEX，包括簡寫（#abc）與三位數（#a1b）格式。
- 選擇配色方案：從六種可用方案中挑選——互補色、類似色、三等分色、四等分色、分裂互補色或單色調。調色盤會立即更新以反映你的選擇。
- 複製可直接使用的 CSS 值：點擊任何色塊即可將其 HEX 值複製到剪貼簿。在每個色塊下方，你會看到 RGB 與 HSL 值——將滑鼠游標懸停於其上即可顯示對應的複製按鈕。舉例來說，HEX #3b82f6 會轉換為 RGB（59, 130, 246）與 HSL（217°, 91%, 59%）。
- 貼到你的 CSS 中：將複製的值直接貼入你的樣式表。HEX 範例：color: #3b82f6;。RGB 範例：background-color: rgb(59, 130, 246);。HSL 範例：border-color: hsl(217, 91%, 59%);。
- 檢查對比度以確保無障礙性：使用顏色對比度檢查工具，確保文字與背景的搭配符合 WCAG AA 或 AAA 標準。例如，#3b82f6 在白色背景上的對比度為 4.6:1，可通過一般文字的 AA 標準，但無法通過 AAA（需要 7:1）。
產生器的即時回饋讓你能快速嘗試各種方案。如果某個方案不適用於你的專案，無需重新輸入基礎顏色即可切換至其他方案。舉例來說，先從像 #10b981（祖母綠）這樣的品牌色開始，產生一組互補色調色盤（#b91048，深粉紅色），再切換到單色調以建立較淺（#a7f3d0）與較深（#059669）的變體，為 UI 增添層次感。該工具基於 HSL 的計算能確保即使切換方案，所有顏色仍感覺彼此相關。
何時在 CSS 中使用各種配色方案
選擇正確的配色方案，取決於顏色在你的設計中所扮演的角色。互補色方案最適合用於像按鈕或連結這類需要立即視覺衝擊的高對比元素。例如，藍色（#3b82f6）與橘色（#f6af3b）的搭配，在中性背景上用於「註冊」按鈕效果極佳。類似色方案使用色環上相鄰的顏色，能營造平靜且協調的視覺效果——非常適合用於漸層、背景或需要和諧感的插圖。由 #3b82f6（藍色）、#3bf6d7（藍綠色）與 #3b56f6（靛藍色）組成的調色盤，便適合用於平靜的 UI 或自然主題的插圖。
三等分色方案提供一組以 120° 等距分布、平衡且鮮明的三色組合。這類方案適用於需要多樣性但不至於相互衝突的介面，例如儀表板或資訊圖表。以 #3b82f6 為基礎的三等分色調色盤可能包含 #f63b82（粉紅色）與 #82f63b（萊姆綠），為圖表或狀態指示提供鮮明的顏色。四等分色方案以 90° 間隔使用四種顏色，內容更豐富但需要小心平衡以避免視覺雜亂。它們適合用於複雜的資料視覺化或需要多種不同顏色的插圖。例如，以 #3b82f6 為基礎的四等分色調色盤，可能包含 #3bf682（薄荷綠）、#f6af3b（橘色）與 #823bf6（紫色）。
分裂互補色方案透過使用互補色兩側的兩個色相，來柔化直接互補配色的對比。這能營造出更細膩、精緻的視覺效果，同時保有視覺趣味。以 #3b82f6 為基礎的分裂互補色調色盤，可能會使用 #3bf682（薄荷綠）與 #f63b82（粉紅色），而非直接互補色 #f6af3b。這種方案適用於卡片、徽章，或任何希望在保有對比之餘，又不產生直接互補配色張力的設計。單色調方案僅變化亮度，非常適合用於建立色調階梯。適用於陰影、hover 狀態、邊框，或任何需要在不引入新色相的情況下增加層次感的 UI 元件。以 #3b82f6 為基礎的單色調色盤可能包含 #1e40af（深藍色）、#60a5fa（中藍色）與 #dbeafe（淺藍色），呈現乾淨且統一的視覺效果。
如何在 CSS 中套用產生的調色盤
一旦產生調色盤，將其套用到 CSS 中便相當簡單。首先在樣式表的 :root 選擇器中為每個顏色定義 CSS 變數。這能讓你的程式碼保持 DRY（不要重複自己），並方便日後更新顏色。例如：
:root { --primary: #3b82f6; --primary-complement: #f6af3b; --primary-analogous-1: #3bf6d7; --primary-analogous-2: #3b56f6; --primary-monochrome-dark: #1e40af; --primary-monochrome-light: #dbeafe; }定義好這些變數後，你就能在整個 CSS 中使用它們。例如，要使用互補色為按鈕設定樣式：
.btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--primary-monochrome-dark); }若要為卡片設定類似色的背景：
.card { background-color: var(--primary-analogous-1); border-left: 4px solid var(--primary); }如果你使用 HSL，可以直接在 CSS 中微調顏色。例如，若要為停用狀態降低主要顏色的飽和度：
.btn-primary:disabled { background-color: hsl(217, 50%, 59%); }產生器的輸出包含所有三種格式，因此你可以選擇最適合自己工作流程的格式。HEX 最簡單，適合用於靜態顏色；RGB 支援 alpha 通道（例如 rgba(59, 130, 246, 0.5) 用於透明度）；HSL 則適合進行動態調整。例如，你可以使用 HSL 來建立會改變飽和度或亮度的漸層：
.gradient-bg { background: linear-gradient( to right, hsl(217, 91%, 59%), hsl(217, 91%, 80%) ); }將顏色套用於文字與背景時，務必檢查對比度。產生器產生的調色盤雖然和諧，但並不保證具備無障礙性。例如，#3b82f6 在白色背景上的對比度為 4.6:1，可通過一般文字的 WCAG AA 標準（最低 4.5:1），但無法通過 AAA（最低 7:1）。對於較小的文字或 UI 元件，你可能需要調整亮度，或從單色調方案中選擇較深的變體。顏色對比度檢查工具能幫助你視需要驗證並調整配色組合。
CSS 配色方案的常見工作流程
一個典型的工作流程會從一個品牌色作為基礎開始。例如，如果你的品牌色是 #10b981（祖母綠），你可以產生一個互補色調色板（#b91048，一種深粉紅）來用於按鈕或連結等強調元素。然後，切換到單色調，來建立較淺（#a7f3d0）和較深（#059669）的變體，用於介面深度，例如陰影、懸停狀態或邊框。這種做法能確保所有顏色感覺彼此相關，同時為動態介面提供足夠的多樣性。
對於資料視覺化，三等分或四等分配色方案效果良好。從 #3b82f6 衍生的三等分調色板可能包含 #f63b82（粉紅）和 #82f63b（萊姆綠），為圖表或狀態指示器提供鮮明的色彩。四等分配色方案提供更多的變化，但需要仔細平衡以避免視覺雜訊。例如，從 #3b82f6 衍生的四等分調色板可能包含 #3bf682（薄荷綠）、#f6af3b（橘色）和 #823bf6（紫色），可用於具有多個資料序列的複雜儀表板。
對於插圖或情緒板，類比配色方案能創造出自然、協調的外觀。一個由 #3b82f6（藍色）、#3bf6d7（青色）和 #3b56f6（靛藍）組成的調色板適合用於寧靜、以水為主題的插畫。分裂互補配色方案適用於想要對比、但又不想承受直接互補配色張力的設計。例如，從 #3b82f6 衍生的分裂互補調色板可能使用 #3bf682（薄荷綠）和 #f63b82（粉紅），用於卡片或徽章。
在建立 UI 時，從單色調方案開始，為陰影、邊框和懸停狀態建立色階。然後，引入一個互補或三等分的顏色作為強調色。例如，一個像 #6b7280（灰色）這樣的中性基底，搭配其互補色 #80726b（灰褐色），可以創造出精緻且極簡的調色板。使用單色調方案來建立灰色的較淺和較深變體以增加深度，並將灰褐色保留給行動呼籲元素。這種做法能在保持設計簡潔的同時，確保視覺層級。
如果你正在權衡各種選擇，Procreate RGB 轉 CMYK：可印刷的處理方法 對此有詳細說明。
如果你正在權衡各種選擇，RGB 轉 HEX 替代方案：值得一試的瀏覽器轉換工具 對此有詳細說明。