一個基於色彩理論建立的調色盤產生器替代方案，能將單一基準色轉換成一組和諧的色票，使用 HSL 色輪上固定的色相旋轉——互補色增加 180°，類似色偏移 ±30°，而三等分配色則以 120° 的間距排列三個顏色。與從照片中擷取色彩的影像式調色盤工具不同，這類產生器從您選擇的基準 HEX 色開始，並讓您決定套用哪種色彩理論關係。結果是一組具確定性且可重現的調色盤，您可以精確地分享：相同的基準色搭配相同的配色方案，總會產生相同的色票，這使得它們易於記錄和交接。調色盤產生器是該方法的免費、瀏覽器式實作。它完全在用戶端執行，無需註冊，並以 HEX、RGB 和 HSL 公開每一個顏色，讓您可以直接將數值貼入 CSS、設計應用程式或品牌風格指南中。對於想要使用經典色輪配色方案，卻不想上傳影像、建立帳號或安裝桌面應用程式的使用者來說，它是常見線上調色盤工具的實用替代品。
人們尋找其他調色盤工具的原因
許多設計師起初使用熟悉的線上調色盤工具，事後才發現其限制。例如，影像式產生器從您上傳的照片衍生調色盤，這在營造氛圍時很有用，但當您已經有品牌色並希望圍繞它建立已知和諧關係時，就沒那麼實用。其他工具將所有功能鎖在付費方案或註冊牆後，免費方案則限制可儲存的調色盤數量。有些產生器只顯示一種配色類型——通常是五色的流行組合——卻未揭露背後的色彩理論，因此您無法輕易重現或調整結果。
一個實用的替代方案運作方式不同。它不是從影像開始，而是從您選擇的基準色開始。它不使用不透明的演算法，而是採用色輪上眾所周知的關系——互補、類似、三等分等——讓您在點擊之前就能預測結果。而且因為它在瀏覽器中執行，所以不會在遠端伺服器留下任何工作痕跡。這就是調色盤產生器旨在填補的實際落差：一個由色彩理論驅動、具確定性的調色盤建構工具，只需要一個 HEX 和一種配色方案。
如何從單一基準色建立調色盤
工作流程刻意設計得很短。每個步驟都會就地更新調色盤，因此您可以在不遺失基準色的情況下反覆調整。
- 使用色彩選擇器選擇基準色，或直接在輸入欄位中輸入 HEX 值（例如 #3b82f6）。
- 從配色方案選擇器中選擇一種配色方案——互補、類似、三等分、四等分、分裂互補或單色調。
- 點擊任何色票即可將其 HEX 複製到剪貼簿，並讀取色票下方顯示的 RGB 和 HSL 值，以便用於 CSS 或設計工具中。
這就是完整的流程。無需建立帳號，無需儲存專案，也無需上傳影像。如果您想嘗試不同的配色方案，只要切換選擇器，調色盤就會根據相同的基準色重新計算。如果您想更換基準色，只要替換 HEX，作用中的配色方案就會根據新的起點更新。
六種配色方案及其色相旋轉
產生器中的每種配色方案都在 HSL 色彩空間中運算，其中色相是一個 0–360° 的圓。這些關係是由色相從基準色旋轉的距離所定義，這就是為什麼經典的色彩理論配對在任何遵循該模型的工具中看起來都一樣。下表概述了六種配色方案、其套用的旋轉，以及各自的典型用途。
| 配色方案 | 從基準色的色相旋轉 | 產生的顏色 | 典型用途 |
|---|---|---|---|
| 互補色 | +180° | 2（基準色 + 對比色） | 強烈對比、行動呼籲強調色 |
| 類似色 | ±30° | 3（基準色 + 兩個鄰色） | 平靜、協調的組合，自然場景 |
| 三等分 | 三個點相隔 120° | 3（基準色 + 兩個等效色） | 平衡、充滿活力的調色盤 |
| 四等分 | 四個點位於 90° | 4（兩組互補色對） | 內建變化豐富的調色盤 |
| 分裂互補 | +180° ±30° | 3（基準色 + 對比色兩側的兩個鄰色） | 有對比但無直接對立的張力 |
| 單色調 | 色相不變，明度分級 | 可變（通常為 4–6） | 用於陰影、邊框、深度等的色階 |
在此刻意使用 HSL：它將色相與飽和度及明度分開，因此旋轉色相時能保持基準色的感覺，同時顏色之間的關係保持可預測——這在處理原始 RGB 通道時難以實現。產生器也能正確處理色相循環，因此基準色相 350° 加上 30° 會落在 20°，而不是 380°——數學運算保持在圓上。
實作範例：一個色相，三種配色方案
為了讓旋轉更具體，請取一個基準色，其色相為 220°（光譜中的藍色端）、飽和度 80%、明度 50%。互補配色方案將色相旋轉 180°：
- 公式：互補色相 = (基準色相 + 180°) mod 360°
- 代入：(220° + 180°) mod 360° = 400° mod 360°
- 結果：互補色相 = 40°
這在保持相同飽和度與明度的同時，落在溫暖的橘色調上——這正是互補配色方案所建立的高對比組合。類似配色方案以較小的 ±30° 偏移套用相同的邏輯，產生位於 190°、220° 和 250° 的三個色相——全部位於色輪的藍紫色一側。因此，只要切換配色方案選擇器，相同的基準色就能產生高對比的互補調色盤或較柔和的類似色組合，無需重新輸入任何其他數值。
為每個設計任務選擇合適的配色方案
配色方案的選擇通常取決於您想要營造的氛圍，而不僅僅是個人品味。互補調色盤最為強烈，因為每個顏色在色輪上都位於另一個顏色的對面；它們通常適用於在中性背景上放置單一強調按鈕，但在用於彼此疊加的大塊文字時則較為吃力。類似調色盤最為平靜，因為色相彼此相鄰；它們自然適合用於登陸頁面、儀表板以及任何希望呈現統一風格而不出現突兀過渡的介面。
三等分和四等分方案產生較多顏色，這使得它們有助於資料視覺化、插圖和需要區分明顯類別卻仍看起來相關的儀表板。分裂互補是介於互補和類似之間的中間地帶：它保留了對比色之間的對比，但透過使用對比色的兩個鄰色而非對比色本身來軟化張力。單色調實質上就是具有明度階梯的單一色相，這就是為什麼它是陰影、懸停狀態、邊框以及任何需要色階而非彩色組合之場合的預設選擇。
實際上，同一個專案經常會使用一種以上的配色方案。典型的工作流程是選擇一種品牌色作為基準色，為強調色和圖表產生互補或三等分組合，然後切換到單色調，為背景和停用狀態建立中性色調與陰影。
無障礙、限制與隱私
和諧的調色盤並不自動具備無障礙性。色彩理論告訴您哪些顏色搭配起來好看，但不會告訴您前景與背景是否符合可讀文字所需的對比度。每當您將顏色套用於文字和背景時，請使用專用的對比度檢查工具，依據已公布的 WCAG 指引進行檢測。色彩對比度檢查工具使用相同的 HEX 輸入運作，並立即為您提供 AA 或 AAA 的判定，這使其成為建立調色盤後的自然後續步驟。
還有一些值得注意的實際限制。這六種配色方案涵蓋了您最常用到的關係，這對大多數 UI 和品牌工作來說已經足夠。如果您需要在三等分組合中加入第五個顏色或不同的明度層級，請複製 HEX 值並手動繼續建構——每個色票都以 HEX、RGB 和 HSL 顯示，方便您手動編輯。所有運算都在您的瀏覽器中進行，基準色和調色盤的選擇永遠不會被傳送到伺服器，因此您可以在不擔心隱私的情況下處理用戶端工作。
若要更深入了解對比度，適用於無障礙對比的調色盤產生器指南透過相同的六種配色方案，重點說明哪些組合最有可能通過 WCAG AA；而更廣泛的色彩理論背景則記錄在 Wikipedia 的色彩理論條目中。
延伸閱讀：調色盤產生器圖表：解讀色輪。