調色盤產生器圖表會將單一基準色轉換成一組相關色票,並依其在色輪上的位置排列。圖表中的每一列都代表一種經典配色——互補色、類似色、三等分色、四等分色、分裂互補色或單色——而每個色票都會標示其 HEX、RGB 與 HSL 數值。設計師長期以來都把色輪本身視為關係圖表:互補色彼此相對(相隔 180°),類似色彼此相鄰(±30°),三等分色則均勻間隔 120°。遵循該圖表的產生器只需一次點擊,就能建立平衡的調色盤,而不必手動旋轉色相。其結果是一組可直接使用的色彩組合,因為數學運算是在 HSL 中完成的——色相是一個 0–360° 的圓,在 350° + 30° = 20°(而非 380°)處能正確循環。這種可預測的旋轉正是讓圖表在品牌設計、UI 設計、插畫與資料視覺化上值得信賴的原因。
調色盤產生器圖表如何對應色輪
調色盤產生器圖表是一種視覺化表格,將單一基準色與位於色輪上特定角度的相關色彩配對。設計師使用印刷色輪作為參考圖表已超過一世紀,用以預測哪些色相看起來和諧;現代產生器將同樣的關係編碼進來,讓使用者不必手動旋轉色相。其結果是一列色票——每個都標示 HEX、RGB 與 HSL——可直接複製到樣式表或設計檔案中。
該圖表背後的數學刻意在 HSL 色彩空間中執行。HSL 將色彩分離成色相(色輪上的 0–360° 位置)、飽和度與亮度,因此旋轉色相時,飽和度與亮度維持不變。這就是為什麼從柔和的粉彩色產生的互補色配色,仍然保有原本柔和粉彩的感覺——關係保持可預測,而不會意外地改變整體情緒。原始的 RGB 做不到這一點,因為在某個通道數值之間移動,會同時改變感知到的色彩以及色彩之間的關係。HSL 也能正確循環,因此 350° 的色相加上 30° 會落在 20°,而非 380°。正是這個循環機制,讓圖表在色輪交界處仍保持數學上的精準。
六種配色關係並列比較
調色盤產生器圖表所呈現的六種配色,正是色彩理論學家數十年來所描述的六種關係。每種都對應基準色相的固定角度偏移,這也是圖表能自動產生、且每次看起來都一致的原因。下表彙整了各配色的偏移量、視覺感受,以及該配色通常適合的專案類型。
| 配色 | 自基準色相的旋轉角度 | 視覺感受 | 典型用途 |
|---|---|---|---|
| 互補色 | +180° | 最大對比、大膽配對 | 主要品牌色上的行動呼籲強調色 |
| 類似色 | −30°、+30° | 平靜、協調、自然相鄰 | 主視覺區塊、背景、情緒板 |
| 三等分色 | −120°、+120° | 平衡、鮮豔、間距均勻 | 插畫、資訊圖表、活潑的品牌系統 |
| 四等分色 | +90°、+180°、+270° | 豐富、雙對組合的多樣性 | 多類別圖表、分層式版面配置 |
| 分裂互補色 | +150°、+210° | 由兩個鄰近色柔化對比 | 不帶純互補張力的重點與連結色 |
| 單色 | 0°(亮度分級) | 單一色相、色調階 | 陰影、hover 狀態、邊框、中性 UI 深度 |
根據 Wikipedia 的色彩理論條目等來源所彙整的標準色彩理論關係,這六種配色涵蓋了設計師最常使用的色彩關係,這也是為什麼實作了所有這些配色的產生器,能夠取代手動旋轉色票的做法。
從單一基準色產生調色盤
- 開啟調色盤產生器,使用畫面上的色票選擇器挑選基準色,或直接在輸入框中輸入 HEX 數值——例如 #3b82f6。
- 從清單中選擇一種配色:互補色、類似色、三等分色、四等分色、分裂互補色或單色。當你變更基準色或配色時,色票列會即時更新。
- 閱讀每個色票下方的標示。圖表中的每種色彩都以三種格式顯示——HEX、RGB 與 HSL——你可以複製設計工具所需的任何一種格式。
- 點擊任一色票即可將其 HEX 複製到剪貼簿。HEX 是大多數 CSS、Figma 與 Sketch 工作流程會貼上的格式,因此單擊一次就能將色彩移入你的專案。
- 當你需要圍繞基準色加入強調色或中性色時,可切換到第二種配色——例如,先用互補色製作行動呼籲,再切換到單色來建立周圍的淺色與深色變化。
HEX、RGB 與 HSL 在同一列中
圖表中的每個色票都以三種格式標示,因為每種格式各有不同的用途。HEX 是最簡短的標記法——六個十六進位數字——通常會貼入 CSS 自訂屬性、Figma 的填色輸入欄,以及大多數的品牌風格指南。RGB 是紅、綠、藍色通道在 0–255 範圍內的逐字分解,當某個工具或程式庫只接受通道三元組,或你需要從指令稿計算色彩時非常實用。HSL 則是與圖表本身計算方式相符的格式:0 到 360 的色相角度、飽和度百分比與亮度百分比。
三種格式並列顯示,表示你可以依據數學運算的方式閱讀圖表,同時複製目標工具所需的格式。如果你只需要微調強調色的飽和度,HSL 是最容易手動編輯的格式,因為在你調整飽和度與亮度時,色相維持不變。如果你需要將色彩傳送給印刷廠或使用 CMYK 的設計師,HEX 或 RGB 的讀數仍是乾淨的起點——RGB 轉 CMYK 轉換器會在該工作流程中處理下一步。
將圖表應用於實際專案
當調色盤產生器圖表錨定到真實的品牌或 UI 決策時最為實用。常見的工作流程從品牌色作為基準開始——通常是已經出現在標誌或主要按鈕中的色彩——接著產生互補色或三等分色配色,用於強調色、連結與重點。接著切換到單色配色,以建立介面其餘部分所需的較淺色與較深色變化:hover 狀態、邊框、分隔線、停用狀態,以及細微的立體感淺色。
在資料視覺化中,圖表扮演略為不同的角色。類別圖表適合使用三等分色或四等分色組合,讓每個系列都能清楚區分又不會與背景衝突;而連續色階與熱力圖通常更適合以單一主色產生的單色漸層。在這兩種情況下,產生器為你提供的是一個有理論依據的起始調色盤,而非隨機組合,因為色彩關係源自色輪,而非偶然。
同一張圖表也能支援較輕的創意工作。插畫、情緒板,以及時尚或室內設計的調色盤,經常仰賴類似色配色,因為相鄰的色相感覺自然且協調——接近你在日落或樹葉中所見的漸層。對於這類專案,先選定情緒色,再從圖表中取樣兩個相鄰的色票,即可產生一個無需進一步編輯就能保持整體感的調色盤。
圖表之外的對比與無障礙
和諧的調色盤並不自動代表無障礙。色輪上的關係描述的是色彩彼此相鄰時的視覺效果,而非有色文字在彩色背景上能否被低視力或色盲人士閱讀。WCAG 2.2 為內文文字、大型文字及非文字 UI 元件定義了具體的對比門檻,任何從產生器複製的色彩組合,在正式採用前都應依據這些規則進行檢查。
將圖表中的任何文字與背景組合,透過對比檢查器執行檢測,確認是否符合 AA 或 AAA 標準。若互補強調色在螢幕上看起來大膽,但用於內文時對比不足,同基準色的單色漸層通常是較安全的文字選擇,因為調整亮度會改變感知亮度,而不會引入第二個色相。如需更深入的完整工作流程,可參考用於無障礙對比的調色盤產生器指南,該指南將產生器與對比工具搭配使用,讓圖表一次同時產生調色盤與符合無障礙標準的色彩組合。
由於產生器完全在瀏覽器端於用戶端執行,基準色與其產生的色票永遠不會離開你的裝置。無需註冊、無需上傳,也沒有伺服器端儲存——每次點擊色票都只是在本地複製 HEX,這使得圖表可安全地用於機密的品牌色彩、內部風格指南,以及尚未公開的進行中調色盤。