配色產生器是一種工具，會拿一個基礎顏色，在色輪上套用固定的色相旋轉角度，產生一小組協調的顏色——通常是三、四，或五個——每一個都以 HEX、RGB，與 HSL 顯示。這些旋轉角度，就是設計師手繪時所使用的同一套關係：互補配色，把第二個顏色放在色輪上距離基礎色恰好 180° 的位置；類似配色，往兩個方向各走 ±30°；三等分配色，則把三個顏色平均分布，各相差 120°。因為這套運算是在 HSL 色彩空間中進行的——色相在這裡是一個 0°–360° 的圓，與飽和度、明度分開——所以不論你從哪個顏色開始，同樣的旋轉角度，感覺起來永遠是同一種關係。正是這種可預期性，讓輸出的結果變成一組「配色」，而不是一把隨機的色票：每一種配色方案，都是由基礎色相、方案選擇，以及幾個角度常數所決定的。大多數產生器，只會把數字印出來就結束了，但一個真正實用的產生器，還會讓你點擊某個色票，把它的 HEX 值複製下來，用在 CSS、Figma 檔案，或品牌風格指南裡。
配色產生器與隨機選色工具有什麼不同
隨機選色工具，會毫無偏好地，從 1,670 萬種 24 位元可能性中，抽出任意一個顏色；當你想要一點驚喜，或是在畫情境板、還沒有固定的起點時，這種工具很有用。配色產生器則正好相反：它從你已經選好的一個顏色出發，產生出你在點擊之前，就能預測外觀的相鄰顏色。如果你從一個特定的品牌藍色出發，要求一個互補配色方案，你會得到一個特定的橘色——不是「某個看起來可能不錯的顏色」。這種確定性，來自色輪本身，根據維基百科上的色彩理論概觀，色輪在 CSS 變數與設計代符出現之前，已經被用來教授藝術與設計中的和諧概念超過一個世紀。
就實務層面來說，這代表兩件事。第一，你不用大海撈針去找對的強調色——你是用算的。第二，你團隊裡的任何人，都可以拿同一個基礎 HEX 值，選擇同一個配色方案，得到同一組配色。第二點，正是配色產生器在設計系統中很好用的原因：這個做法可以重現，不需要分享截圖，所以品牌方，可以直接給承包商三個 HEX 值加一個方案名稱，而不用給一整本 PDF 色卡。
六種配色方案背後的色輪數學
配色產生器裡的每一種方案，都是把基礎顏色的色相，繞著一個 0°–360° 的圓旋轉，再把每一個結果重建成 HEX、RGB，與 HSL 計算出來的。這些角度不需要每次重新發明——它們來自藝術與設計教育中，出現過的六種標準關係。
為什麼用 HSL、而不用 RGB？HEX 與 RGB，會把色相與亮度混在一起，讓「深藍色的互補色」感覺難以預測：把深藍色的紅色色版調高 200，你可能會得到棕色，而不是橘色。HSL 把色相（顏色本身）、飽和度（看起來有多鮮艷），與明度（看起來有多亮或多暗），拆成互相獨立的數值，所以旋轉色相，不會不小心讓結果變得褪色或變暗。這個產生器，也正確處理了色相的循環問題——基礎色相 350°，加上 +30° 的旋轉，會得到 20°，而不是 380°——所以不論你從色輪上的哪個位置開始，同一種配色方案，感覺起來都是一致的。
舉一個具體的例子：如果你的基礎顏色是 #3b82f6，它的 HSL 色相，大約落在色輪上的 217°。互補配色的 180° 旋轉，會落在大約 37°，穩穩地落在橘色的區間裡。這一步簡單的算術——加上 180°，再對 360° 取模——就是你的品牌藍色與它的互補色之間的全部差異，也正是這個工具在你每次選擇互補配色方案時，所執行的同一個步驟。
各配色方案一覽：角度與使用情境
| 配色方案 | 與基礎色相的角度差 | 最適合用於 |
|---|---|---|
| 互補 | 180° | 高對比強調色、行動呼籲按鈕、有色背景上的主視覺文字 |
| 類似 | −30°、+30° | 沉穩的介面、漸層標題、自然主題插畫 |
| 三等分 | −120°、+120° | 鮮豔的資訊圖表、活潑的行銷頁面、平衡感十足的插畫 |
| 四等分（矩形） | 0°、+90°、+180°、+270° | 豐富的雙配對設計、包含多個分類數列的儀表板 |
| 分裂互補 | +150°、+210° | 比類似配色對比更強，但沒有直接互補色那種緊張感 |
| 單色 | 色相相同，明度分階 | 字級層級、hover 與 active 狀態、中性表面與邊框 |
想直觀了解這六種配色方案，在色輪上分別落在什麼位置，色輪圖表指南一眼就能呈現每一種關係。上面的角度，正是配色產生器所使用的同一組角度，所以一旦你了解這些關係，從手繪色輪切換到使用這個工具，大部分靠的都是肌肉記憶。
用三個步驟，從一個 HEX 值建立一組配色
- 選擇或輸入一個基礎顏色。開啟配色產生器，用選色器挑選一個色票，或直接輸入一個 HEX 值——舉例來說，如果你想搭配一個常見的介面藍色，可以輸入 #3b82f6。
- 選擇一種配色方案。從配色方案選單中，選擇互補、類似、三等分、四等分、分裂互補，或單色。配色會立即更新，因為每一個顏色，都是根據基礎色相，加上前面表格中列出的角度，重新計算出來的。
- 讀取並複製你需要的數值。每一個色票下方，都會顯示 HEX、RGB，與 HSL。點擊任何一個色票，就能把它的 HEX 值複製到剪貼簿。把這個數值放進 CSS 變數、Figma 樣式，或品牌風格指南裡——格式已經是你需要的那一種。
你可以重複最後兩個步驟，想重複幾次都可以：基礎顏色，是唯一會改變整組配色的輸入項目。輸入一個新的 HEX 值，每一個色票，都會依照同一個配色方案重新建立，其他流程完全不會重設。
協調配色在實際工作中的應用場景
三種工作流程，涵蓋了大部分的實際用途。
介面與網頁設計。選出你的主要品牌顏色，產生一組三等分或分裂互補配色，用於強調色與警告狀態，接著切換到單色配色，來建立 hover、active，與 disabled 的色調變化。因為單色配色，保持同一個色相、只改變明度階，產生出來的色調，看起來就像是同一個顏色在不同光線下的樣子——這對元件庫來說很實用，因為在幾十個按鈕、輸入框，與標籤之間，一致性很重要。
品牌與標誌設計。一個常見的起手流程，是選一個品牌顏色當基礎，要求一個互補或三等分配色方案來擴充調色盤，再加上一個單色變化版本，用於中性色與色調。整個過程只需要幾分鐘，得到的結果，是一組有紀錄的關係，而不是一塊憑感覺拼湊的情境板——更容易交接，也更容易在整個團隊之間保持一致。
資料視覺化。三等分與四等分配色，在分類資料中很受歡迎，因為即使色相間隔很大，這些顏色一眼看去，在視覺上仍然清楚可分辨。如果資料集有五個或更多個數列，四等分配色再加上從單色配色中取出的額外中性色，通常會比硬把更多顏色塞進單一組三等分配色，效果來得更穩健。
對於篇幅較長的專案——年度報告、提案簡報、情境板、空間風格指南——同一個基礎顏色，可以在不同的配色方案下反覆使用，產生封面配色、章節分隔線，與圖表填色，這些結果明顯屬於同一個色彩家族，卻又不完全相同。
協調不等於對比
來自同一組協調配色的兩個顏色，當其中一個以文字形式，疊在另一個上面時，仍然可能無法通過無障礙檢查。配色產生器不會強制檢查對比度，因為協調感是色輪本身的特性，而無障礙，則是這些顏色被當成前景／背景配對使用時，彼此互動所產生的特性。WCAG 針對這種情境，發布了對比度指引，設計師通常會另外做這項驗證——而不是把它當成配色產生過程的一部分。
務實的做法，是先產生配色，再驗證你真正打算上線的那幾組配對：卡片背景上的內文文字、主視覺漸層上的標題、hover 狀態上的圖示。顏色對比度檢查器讓你貼上兩個 HEX 值，並排讀取 WCAG 比率；把它想成配色之後的第二個步驟，而不是配色的替代品。一組看起來平衡的配色，與一組符合 WCAG 標準的文字配對，是兩個獨立的目標——有時候同一個顏色能同時滿足兩者，有時候你需要從單色系列中，挑一個不同的明度，才能讓內文文字在有色卡片上保持可讀。
一切都在瀏覽器中執行——不需要註冊、不需要上傳，也不需要帳號。你輸入的基礎顏色，以及由它產生的配色，永遠不會離開你正在使用的裝置，這讓這個流程，對還沒對外公布的品牌顏色來說也很安全。
如果你還在權衡不同做法，新手配色產生器：只選一個顏色這篇文章有詳細說明。