色彩調色盤產生器範例是一組完成的色票，從單一基準色出發，採用六種色輪關係之一（互補、類似、三等分、四等分、分裂互補或單色）建構而成，每個顏色皆以 HEX、RGB 和 HSL 表示。色彩調色盤產生器接受任何基準 HEX 碼，並套用該關係，立即回傳一個可直接使用的調色盤，內含兩到四種顏色，加上該配色方案所定義的任何色調。每個範例都是在 HSL 色彩空間中運算，其中色相是一個 0–360° 的圓，你可以旋轉它來找出搭配得宜的顏色，而飽和度和亮度則保持不變，除非你自行調整。這代表同一個基準色只需切換配色方案，就能產生六組視覺上截然不同的調色盤，且顏色之間的關係在所有組合中都維持數學上的可預測性。設計師運用這些範例來預覽行動呼籲的重點色、協調的情境色組、鮮明平衡的三等分組合，或色調化的 UI 階梯，無需以肉眼挑色。
你可以產生的六種配色方案範例
挑選一個基準色，相同的 HEX 碼會針對每種配色方案產生不同的調色盤。下表概述了各方案回傳的內容、定義該方案的旋轉角度，以及它在實際專案中常見的應用情境。
| 方案 | 基準色的色相旋轉 | 回傳的色票數 | 視覺氛圍 | 常見用途 |
|---|---|---|---|---|
| 互補 | +180° | 2 | 高對比、大膽 | 行動呼籲重點色、主標文字 |
| 類似 | −30° 和 +30° | 3 | 平靜、協調 | 自然風景、情緒板、品牌暖調 |
| 三等分 | −120° 和 +120° | 3 | 平衡、鮮明 | 趣味品牌、插畫、圖示 |
| 四等分 | +90°、+180°、+270° | 4 | 豐富、多變 | 多區塊版面、儀表板系列 |
| 分裂互補 | 基準、+150°、+210° | 3 | 柔和互補 | 較不刺眼的搭配、編輯版面 |
| 單色 | 色相固定、亮度階梯 | 多 | 色調化、簡潔 | UI 深度、hover 狀態、邊框、陰影 |
每一列代表在固定基準色下，切換配色方案時色彩調色盤產生器範例將回傳的內容。互補配色提供強烈的配對，因為兩個色相正好位於色輪的對立位置。類似和單色範例則較為平靜，因為所有色相彼此相距 30° 以內或完全相同。三等分和四等分範例將顏色均勻分散於色輪上，以獲得更豐富的組合，而分裂互補則保留了互補的高對比，但透過選取互補色兩側的色相而非互補色本身，來柔化張力。
如何使用色彩調色盤產生器建立調色盤
產生上述任何一個範例只需三個步驟，只要變更基準色或配色方案，調色盤就會立即更新。
- 使用選色器挑選基準色，或直接在輸入欄位中輸入像 #3b82f6 這樣的 HEX 碼。
- 從六個選項中選擇一種配色方案：互補、類似、三等分、四等分、分裂互補或單色。
- 點選產生之調色盤中的任何色票，即可將其 HEX 碼複製到剪貼簿，接著閱讀該色票下方顯示的 RGB 與 HSL 數值。
開啟 色彩調色盤產生器，嘗試從你的風格指南中挑選一個品牌色，逐一查看六種範例。由於所有運作都在你的瀏覽器中進行，無需註冊也無需上傳，你可以快速瀏覽各種選項，不離開頁面。
HEX、RGB 和 HSL：讀懂每種格式
每個範例中的每個色票都會以三種格式顯示，因為每種格式適用於工作流程的不同環節。
HEX 是六位數的十六進位值，可直接套用於 CSS 色彩屬性、設計工具的設計令牌和品牌風格指南。RGB 是紅、綠、藍三個通道的三元組，寫成三個介於 0 到 255 之間的數字，是大多數影像編輯器和設計應用程式原生使用的格式。HSL（色相、飽和度、亮度）則是色彩調色盤產生器範例實際運算所用的格式，因此閱讀色票下方的 HSL 值，能讓你精確了解該色相為何、飽和度多寡，以及明暗程度。
這點很重要，因為 HSL 讓你能夠手動微調。微調亮度可為你提供 hover 狀態、焦點環和陰影色調，同時不偏離原始色相；調整飽和度則能將鮮明的三等分範例柔化為更為內斂的版本。HEX 和 RGB 是你貼入正式程式碼的格式；HSL 則是你用來理解和調整的格式。
依專案類型分類的實際範例
同樣的基準色會根據你正在建構的內容產生不同的調色盤。下表是一個起點——先挑選配色方案，再從中取樣顏色。
| 專案類型 | 建議配色方案 | 有效的原因 |
|---|---|---|
| UI 儀表板 | 互補 + 單色 | 大膽的行動操作，乾淨的色調階梯用於邊框與 hover 狀態 |
| 品牌識別 | 三等分 | 在核心色之外，為圖示和字型提供兩個平衡的重點色 |
| 資料視覺化 | 四等分 | 足以支援多系列圖表的獨特色相，同時保有統一感 |
| 插畫或情緒板 | 類似 | 暖色或冷色家族，放在一起顯得自然 |
| 編輯或長篇版面 | 分裂互補 | 保有高對比，卻無直接互補的張力 |
對於 UI 儀表板，請從品牌藍作為基準色開始，為「儲存」或「刪除」等主要操作產生一組互補範例，接著切換到單色方案，建立用於邊框、hover 狀態和停用控制項的色調階梯。對於品牌識別，請從核心色產生三等分範例，讓你擁有兩個與其平衡的重點色，一個用於圖示，另一個用於字型。對於資料視覺化，四等分範例為你提供足夠獨特的色相來標示六到八個圖表系列，同時維持基準色的家族感，避免顏色相互混淆。
插畫和情緒板的創作偏向使用類似和單色範例。以夕陽橘建構的類似範例，能產生你在自然界中並排看到的暖黃、粉紅和紅色；而單色範例則提供從柔和淡彩到深沉色調的完整明度範圍。由於每個範例都由同一個基準 HEX 碼驅動，你可以在決定採用哪一種之前，並排比較各種配色方案。
範例背後的數學原理
所有六個範例都是透過在 HSL 色輪上旋轉色相得出，因此其數學原理小到足以從頭到尾理解。根據維基百科上所概述的色彩理論原則，這些色相關係正是設計師數十年來從色輪上手動擷取的同一套關係。
以基準色 #3b82f6 為例。轉換為 HSL 後，它位於色相 217°、飽和度 91%、亮度 60%，是個飽和的中藍色。互補範例為色相加上 180°，使圓圈從 217° 旋轉到 37°（因為 397° − 360° = 37°），在相同的飽和度和亮度下產生鮮明的橘色。類似範例則將色相向兩側各偏移 30°，在基準色兩側分別得到 187°（青色）和 247°（紫藍色）的色相。
三等分範例將色相向兩側各移動 120°，分別落在 97°（黃綠色）和 337°（洋紅粉色）的色相。四等分則更進一步，以 90° 為間隔取得四個點。分裂互補保留了互補的柔和感，方法是使用 37° 兩側各 30° 的兩個色相——也就是 7° 和 67°——而非互補色本身。單色則完全不旋轉色相；它保留 217°，並向上向下階梯式調整亮度，以建立乾淨的色調階梯。
由於旋轉會正確地進行循環處理（350° 的色相加上 30° 會落在 20°，而不是 380°），每個範例都能保持數學上的正確性與可預測性，無論你從色輪的哪個位置開始。
無障礙與和諧密不可分
和諧的調色盤範例並不一定是無障礙的調色盤。色彩和諧探討的是顏色在色輪上的關係，而無障礙則關注文字顏色與其背景之間的對比程度。互補範例中的兩種顏色可能正好位於色輪的對立位置，卻仍無法達到內文所需的對比比例。
安全的做法是先產生你的調色盤範例，接著在發布前將每組前景與背景配對送交 WCAG 對比檢查。調色盤產生器為每個色票提供 HEX 和 RGB 值，這正是對比檢查工具所讀取的格式，因此兩個工具能依序運作，無需任何轉換步驟。特別是在 UI 工作中，將互補或三等分範例與單色階梯結合，並將高對比組合保留給真正需要讓行動呼籲突出的時刻。
如果你正在權衡各種選項，色彩對比檢查器範例：WCAG AA 與 AAA 配對對此有詳細說明。
如果你正在權衡各種選項，色彩調色盤產生器詳解：色輪基礎對此有詳細說明。