色彩調色盤產生器會從單一基準色產生兩種不同的輸出：單色調的深淺變化，以及完整的色輪變化，例如互補色、類似色、三等分、四等分和分裂互補色組合。在設計術語中，陰影是基準色與黑色混合(降低亮度)，色調是同一顏色與白色混合(提高亮度)，而色相則是基準色與灰色混合(降低飽和度)——三者合起來構成一個單一色相家族。相比之下，變化則是色相圓上不同位置的顏色，因此色相改變時，顏色之間的關係仍保持可預測。一個免費的色彩調色盤產生器能在同一畫面完成這兩項工作：挑選一個 HEX 碼，選擇一套配色方案，工具就會回傳你所需的對應色調、陰影和色輪變化，每個顏色都會以 HEX、RGB 和 HSL 三種格式顯示。陰影與變化之間的區別，是你未來建立每一組調色盤的基礎。
調色盤產生器中「陰影」的意義
單一基準色並非一個平面的數值——它是一個在三維空間中的切面。產生器以 HSL 進行運算，將色相(0–360°)、飽和度(0–100%)和亮度(0–100%)分開處理，而不是直接混合紅、綠、藍三個通道。這樣的分離很重要，因為亮度和飽和度是在不觸碰色相的情況下，產生出陰影、色調和色相的兩條軸線。
- 色調會將亮度提升至接近 100%——顏色逐漸變淡至接近白色。
- 陰影會將亮度降低至接近 0%——顏色逐漸變深至接近黑色。
- 色相會將飽和度降低至接近 0%——顏色逐漸變得柔和趨向灰色。
產生器中的單色配色方案會固定色相，並以等距的間隔逐步調整亮度，這正是設計師為 UI 中的陰影、懸停狀態、邊框和深度建立乾淨色階的方式。僅調整亮度可以保留原始顏色的「氛圍」，同時將其擴展為一個實用的色彩家族。
色輪變化是如何建立的
當產生器建立的是變化而非陰影時，它會在固定飽和度與亮度的情況下旋轉色相。基準色位於 360° 色相圓的某個點上，而該方案中的每一個其他顏色，都是基準色旋轉固定度數後所得。六種方案涵蓋了設計師最常使用的色彩關係，而每一種都可用單一色相偏移量來描述，使幾何關係保持可預測。
| 方案 | 色相旋轉 | 顏色數 | 氛圍 | 最適用於 |
|---|---|---|---|---|
| 互補色 | 基準 + 180° | 2 | 強烈對比 | 行動呼籲重點、首頁橫幅 |
| 類似色 | 基準 ± 30° | 3 | 平靜、和諧 | 背景、自然主題、品牌版面 |
| 三等分 | 基準 ± 120° | 3 | 鮮明、平衡 | 插圖、儀表板、活潑的 UI |
| 四等分 | 基準 + 90° 分成兩對 | 4 | 豐富、多變 | 編輯版面、多系列圖表 |
| 分裂互補色 | 基準 + 150° 和 + 210° | 3 | 柔和對比 | 繁忙背景上的次要 CTA |
| 單色 | 色相固定;亮度分級 | 多個 | 統一、色調一致 | UI 狀態、字級比例、中性色系統 |
運算採用正確的色相循環——350° 的色相加上 30° 會落在 20°，而非 380°。當工具運作正常時，這個細節看不出來;但它能讓你理解為何一組互補色無論從色輪的哪個位置開始，彼此間的距離始終保持不變。色彩理論以正式方式描述這些關係;若需要基礎定義，可參考色彩理論總覽。
如何從單一基準色產生陰影與變化
產生一組完整的調色盤——陰影、色調以及色輪變化——在色彩調色盤產生器中只需三個簡短的步驟：
- 使用選色器挑選基準色，或直接輸入像 #3b82f6 這樣的 HEX 值。
- 選擇一種配色方案——互補色、類似色、三等分、四等分、分裂互補色或單色。
- 點擊任一色票即可複製其 HEX 值，並可讀取其下方顯示的 RGB 與 HSL 數值。
只要變更基準色或配色方案，調色盤會立即更新，因此你無需重新載入頁面即可反覆調整。若想為首頁按鈕取得一個互補色的強調色，只需切換方案並讀取第二個色票;若想建立一套色調統一的 UI 色階，則切換至單色方案並逐一複製每個亮度級別。如果你想慢慢了解、聚焦於挑選第一個基準色的過程，初學者挑選單一基準色的指南以更詳細的篇幅介紹了相同的工作流程。
為你的專案選擇合適的變化
每種方案都有各自的個性，自然對應到不同的用途，而選錯方案正是調色盤在實際版面中感覺「不對」最常見的原因。
- 互補色在色輪上提供最強烈的高對比組合。這使它非常適合用於行動呼籲重點和首頁按鈕，讓強調色能從背景中脫穎而出。
- 類似色落在基準色左右 30° 範圍內，因此讀起來平靜而和諧——就像風景照片中彼此相鄰的顏色。它非常適合用於背景、行銷版面，以及希望呈現統一感卻又不想顯得單調的品牌系統。
- 三等分以 120° 為間隔平衡三種顏色，在保有鮮活力的同時，避免了直接互補所帶來的視覺張力。適用於插圖、儀表板，以及任何希望展現活潑能量的 UI。
- 四等分提供兩組互補色，共四個色相，適合豐富、多變的調色盤。在編輯版面，以及需要區分多個資料系列的圖表中表現尤為出色。
- 分裂互補色透過取對比點兩側各 30° 的兩個色相，來柔化直接的互補關係。你仍保有對比效果，卻能避免 180° 直接配對所帶來的視覺震盪——是繁忙背景上設置次要 CTA 的好選擇。
- 單色僅在同一色相內、以調整亮度的方式構成，因此成為 UI 狀態、字級比例與深度處理的萬用方案。
一個常見的工作流程是:先將你的品牌色作為基準色，再產生一組互補色或三等分配色作為強調色，接著切換到單色方案，圍繞這些顏色建立中性的色調和陰影。這個順序只需三次調色盤更新，就能給你一個具表現力的主色、兩到三個強調色，以及一組完整的亮度色階。
HEX、RGB 與 HSL——該使用哪種格式
每一個色票都會以三種格式顯示，讓你可以直接套用到你已在使用的工具中。正確的格式取決於顏色的使用情境，以及你是否打算之後手動微調。
| 格式 | 範例 | 最適用於 |
|---|---|---|
| HEX | #3b82f6 | CSS 顏色值、設計工具色票、品牌風格指南 |
| RGB | rgb(59, 130, 246) | CSS、影像編輯軟體、JavaScript 顏色物件 |
| HSL | hsl(217°, 91%, 60%) | 手動微調的陰影與色調、程式化產生顏色 |
HEX 與 RGB 可直接套用於 CSS 或像 Figma 這類設計應用;當你想要手動微調飽和度或亮度，或是在程式碼中衍生顏色時，HSL 最為好用。HSL 也讓你能輕鬆地用文字描述變化——「同一個色相，只是再暗 20%」——而不必思考紅綠藍通道的偏移量。
無障礙、隱私與最後檢查
和諧的調色盤並不等同於無障礙的調色盤。當你將顏色套用到文字與背景時，仍須依據 WCAG 指引檢查對比——使用專門的WCAG AA 與 AAA 對比檢查工具，在上線前驗證每一組文字/背景配對。和諧的色彩關係是一種設計訊號;對每位觀者都易於閱讀，則是色輪無法強制執行的另一項限制。
這個產生器完全在你的瀏覽器中以用戶端 JavaScript 執行，因此不需要註冊，你的顏色也不會離開你的裝置。不會有任何資料被上傳、儲存或傳送到伺服器，這代表你所選擇的基準 HEX，以及你所產生的每一組調色盤，都只保留在你自己的電腦上。你可以把產生的陰影與變化應用在 UI 與網頁設計、品牌與標誌設計、資料視覺化調色盤、插圖，以及室內或時尚的情境板——任何需要一組快速、數學上正確且彼此相關顏色的設計場景。由於運算是基於色輪並採用正確的色相循環，無論你從哪裡開始，這些關係都保持可預測，因此相同的方案選擇總會產生相同的氛圍家族。