配色盤產生器會將單一基礎顏色，運用色輪的數學原理，轉換成一組和諧的色票——通常是在 HSL 色彩空間中，以 30°、90°、120° 或 180° 的步進旋轉色相，其中色相被視為一個 0–360° 的圓，可在末端之後循環繞回。當設計師談到「從圖片」建立配色時，他們通常指的是從照片、標誌或情緒板中挑出的單一顏色開始——例如品牌藍、夕陽橘、森林照中的綠色。配色盤產生器會接收那個以 HEX 值表示的基礎顏色，並套用經典的色彩理論關係。你選擇配色方案——互補色、類似色、三等分、四等分、分裂互補色或單色——工具就會產生一組可放入 CSS、Figma 或任何樣式指南的 HEX、RGB 和 HSL 值。由於每次旋轉都是在 HSL 而非原始 RGB 中進行，飽和度和亮度都能維持在控制範圍內，因此配色的氛圍保持不變，色彩關係也保持可預測。
這讓產生器非常適合最常見的「從圖片」任務:你心中已經有一個理想的顏色，並希望圍繞它建立一個可用的系統。
配色盤產生器如何處理圖片中的顏色
照片能給你一個方向——從海水拉出的藍綠色、從秋葉擷取的芥末黃、從水泥牆提取的炭灰色——但單一圖片很少能給你完整的 UI 配色。產生器的工作就是把那個錨定顏色，擴展成你實際需要的完整色組:主色、強調色、中性背景、懸停狀態、警示色調。配色盤產生器透過大致維持飽和度與亮度不變，並在 HSL 色輪上旋轉色相來達成這點;HSL 色輪是一個 360 度的圓，每個方向都對應到不同的色彩家族。
「從圖片」的框架通常意味著以下三種起點之一:
- 取樣得到的 HEX。你已經知道這個顏色，無論是來自品牌指南，還是憑記憶打出來的。
- 吸色工具的結果。你使用色彩選擇器或設計應用程式，直接從照片中的像素讀取 HEX。
- 參考顏色。你用肉眼將照片中的顏色，對應到你記得的具名色彩或 HEX 值。
無論哪種情況，輸入到產生器的內容都相同:一個以 HEX 形式表示的單一基礎顏色，然後由產生器透過色彩理論進行擴展。
如何用三個步驟從 HEX 建立配色
使用配色盤產生器是一個簡短且嚴謹的工作流程。你挑選種子顏色、選擇想要的色彩關係，然後複製輸出的數值。
- 選擇基礎顏色。開啟配色盤產生器，使用色彩選擇器，或直接在輸入欄位中輸入 HEX——例如 #3b82f6。
- 選擇色彩方案。從方案選擇器中挑選互補色、類似色、三等分、四等分、分裂互補色或單色。
- 讀取並複製色票。每個色票下方都會顯示其 HEX、RGB 和 HSL 值。點擊任何色票即可將其 HEX 複製到剪貼簿。
當你變更基礎顏色或切換方案時，配色會立即更新。沒有儲存步驟，也不需要等待伺服器——所有運算都在你的瀏覽器本機進行，因此反覆嘗試基本上是零成本的。
六種色彩方案一覽
每種方案只是對其他顏色在 360° 色相圓上的位置，從你的基礎顏色開始計算，套用不同的規則。下表摘要了產生器提供的六種選項。
| 方案 | 從基礎色旋轉的色相 | 氛圍 | 最適用於 |
|---|---|---|---|
| 互補色 | +180° | 強烈、高對比 | 行動呼籲強調、首頁區塊、海報 |
| 類似色 | ±30° | 平靜、和諧、自然 | 風景照、健康品牌、柔和 UI 主題 |
| 三等分 | ±120° | 平衡、鮮明 | 插畫、儀表板、俏皮的品牌系統 |
| 四等分 | 90° 步進(四種色相) | 豐富、多變 | 編輯版面、複雜資料視覺化 |
| 分裂互補色 | 180° ± 30° | 高對比、張力較低 | 強調色較多的設計，需要呼吸空間 |
| 單色 | 相同色相，階梯式亮度 | 色調、安靜 | 中性色、邊框、懸停狀態、層次 |
其中的數學簡單到可以手算。以色相 350° 的基礎色為例，加上 30° 得到類似色的偏移:350° + 30° = 380°。由於色相是一個 0–360° 的圓，380° 會繞回 20°。這就是為什麼產生器永遠不會回傳「380°」的色票——它總是落在色輪上最接近的有效位置，讓每個結果在數學上正確，在視覺上也可預測。
從圖片靈感到可用的配色
一個實用的「從圖片」工作流程包含三個簡短階段:錨定、擴展、驗證。
1. 錨定顏色。找出圖片中你希望配色圍繞的那一個顏色。如果照片是網站上的標誌，那就是你的基礎色。如果是一張夕陽照，中央那團暖橘色就是正確的錨點;藍綠色的天空與桃色的前景，即使在同一張圖片中也會傳達出不同的訊息。如果你手邊沒有精確的 HEX，顏色對比檢查器或瀏覽器的吸色工具就能立即幫你取得一個。
2. 擴展方案。把該 HEX 輸入配色盤產生器並選擇方案。常見的模式是先從互補色或三等分開始抓強調色，再切換到單色來建立中性色、色調與陰影。由於每種方案都會保留你的基礎顏色，只圍繞它旋轉輔助色相，因此配色感覺上永遠與原始圖片有所關聯。
3. 驗證對比。和諧的配色並不自動代表無障礙。當你得到文字與背景配對的 HEX 值後，請依據 WCAG 指引進行對比檢查。如果兩個色票在內文文字上通過 AA 等級，你就有了一組可用的文字與背景配對;如果未通過，就從同一配色的單色階梯中換入較深或較淺的色階，直到比例落在合格範圍內。
如果你只需要某個顏色的反相色——例如為了快速對比測試而尋找品牌藍的精確對比色——互補色尋找器可以直接給你數位 RGB 的反相值，不必計算完整方案。
實用技巧與常見用途
產生器涵蓋了大多數設計工作會用到的色彩關係，因此幾乎能套用於任何以顏色為核心的任務:
- 品牌與標誌系統。從品牌色開始，產生互補色或三等分組合作為強調色，再加上單色階梯用於按鈕、陰影和分隔線。
- UI 與網頁設計。在 CSS 中直接使用 HEX 或 RGB;若想手動調整飽和度和亮度以處理懸停與啟動狀態，則使用 HSL。
- 資料視覺化。三等分與四等分方案能提供足夠可區分的色相給圖表使用，而不必憑空捏造任意顏色。
- 插畫與情緒板。類似色配色能讓場景保持一致;互補色配色則讓單一元素跳出。
- 室內與時尚造型書。把照片視為基礎，讓配色方案承擔輔助色彩。
幾個習慣能讓這個工具用起來更順手:
- 先鎖定基礎色，再反覆嘗試方案。切換方案成本很低;但更換錨定顏色代表每個色票都得重建。
- 使用單色來建立你的灰色系。真正的中性灰很少出現在和諧配色中——對你的品牌色進行亮度階梯處理，就能得到與整個系統相關的色調灰。
- 複製 HEX 給 CSS 使用，複製 HSL 來進行微調。HEX 與 RGB 可直接放入樣式表與設計應用程式;HSL 則讓像「調亮 10%」這類的一次性調整易於閱讀。
- 每次變更後重新檢查無障礙性。色輪並不了解你的文字大小或背景，因此對比是另一項獨立檢查。
由於產生器完全在你的瀏覽器中透過用戶端 JavaScript 執行，任何內容都不會被上傳或儲存在伺服器上。不需要建立帳號，也不會有任何檔案離開你的裝置，因此可用於品牌色與尚未公開的產品配色，相當安全。若想進一步閱讀這些方案背後的關係——原色、二次色與三次色、互補色配對以及色輪本身——維基百科的 color theory 條目是與產生器所用數學對齊的可靠起點。
如需更深入的瞭解，請參閱疑難排解:從圖片得到的錯誤平均顏色結果。
如需更深入的瞭解，請參閱顏色名稱清單:尋找並複製任何 CSS HEX 值。