沒錯，色彩調色盤產生器輸出的每一個色票，都會同時提供 HEX、RGB 和 HSL 三種格式，這三種正是 CSS 和主流設計工具原生支援的格式。HEX 是大多數網頁程式碼使用的格式，因為十六進位代碼簡短且方便複製貼上。RGB 是通道層級的格式，反映螢幕實際產生色彩的方式，因此像 Figma、Sketch、Adobe XD 和 Illustrator 等設計應用程式都能直接接收 RGB 值，無需轉換。HSL 則是直接對應色輪運作方式的格式:色相是 0° 到 360° 的角度，飽和度代表該色相的強度，亮度則是從黑到白的 0–100% 刻度。由於產生器是以 HSL 計算配色，所回傳的色彩關係——包括互補色、類似色和三角配色——都會以你日後可用來微調調色盤的同樣格式呈現。每個色票下方同時顯示三種格式，完全不需要手動轉換;產生器一次點擊就把調色盤與可直接套用的程式碼數值一起交給你。
這種內建的格式支援，正是 色彩調色盤產生器 能同時在 CSS 和設計工具中使用的關鍵原因。本文章接下來會逐一說明每種格式的用途、怎麼把數值貼進樣式表、怎麼放進設計檔，以及最後應該進行的無障礙檢查。
調色盤產生器會輸出哪些色彩格式
產生器會一次同時以三種格式回傳每個色票。每種格式各有不同角色，要貼哪一種取決於你是在撰寫程式碼、使用向量工具，還是在撰寫風格指南文件。下表顯示從範例基準色 #3b82f6 所產生的三種格式。
| 格式 | 範例 (來自基準色 #3b82f6) | 最佳使用情境 |
|---|---|---|
| HEX | #3b82f6 | CSS 色彩屬性、HTML 內嵌樣式、Figma 與 Sketch 的選色器、品牌風格指南 |
| RGB | rgb(59, 130, 246) | CSS rgb() 函式、color-mix()、任何需要通道級數值的工具 (Photoshop、Illustrator) |
| HSL | hsl(217, 91%, 60%) | 需要變動的 CSS 自訂屬性、程式化的色調與明暗調整、淺色／深色主題切換 |
三種格式描述的都是同一個色彩，因此你可以切換格式而不會改變螢幕上呈現的效果。HEX 值是多數人最先貼上的格式，因為它最簡短。RGB 通道在工具要求數值輸入時很有用，包括 Photoshop 的吸管讀數、CSS 的 rgb() 函式，或是接收通道陣列的資料視覺化函式庫。HSL 讓你只需改變一個數值——色相——就能編輯調色盤，而不會影響色彩看起來的亮度或飽和度。
在 CSS 中使用調色盤色彩
從產生的調色盤到實際運作的樣式表，最快的方法是把色票定義為 CSS 自訂屬性，然後在需要顏色、background-color 或 border-color 值的地方引用它們。產生器的 HEX 輸出可以直接放入 :root 區塊，你可以透過以角色而非十六進位值來命名每個變數，讓檔案保持可讀性。
- 開啟色彩調色盤產生器，用選色器選擇基準色，或輸入一個 HEX 值，例如 #3b82f6。
- 挑選一組配色。如果你想要強烈的強調色，從互補色開始;若想為單一品牌色建立色階，則從單色配色開始。
- 點擊你想保留的每個色票。HEX 值會自動複製到剪貼簿。
- 把 HEX 值貼到 CSS 中的 :root 區塊，每個自訂屬性一個，並使用語意化命名，例如 --color-brand、--color-accent 和 --color-surface。
- 在樣式中使用這些變數，例如 color: var(--color-brand);、background: var(--color-surface);，或任何接受顏色的屬性。
一旦定義好變數，你只需編輯一個區塊就能替換整組調色盤，不需要在各個選擇器中逐一尋找十六進位代碼。如果你想讓某個色票變亮或變暗，把那個屬性從 HEX 換成 HSL，使用 hsl() 函式搭配不同的亮度值即可。任何支援 CSS 自訂屬性的瀏覽器也支援 hsl()，因此這個替換對任何現代網站都是安全的。
在 Figma、Sketch 和 Adobe XD 中使用調色盤色彩
設計工具會把產生器的輸出視為原生輸入:HEX 字串可以貼到任何選色器，而 RGB 通道則適用於偏好數值輸入的工具。無論使用哪個應用程式，工作流程都一樣，唯一的選擇是要貼上 HEX 字串，還是要手動輸入三個 RGB 數值。
- 在色彩調色盤產生器中產生調色盤，並複製所需色票的 HEX。
- 在 Figma 中，為框架、填色或描邊開啟選色器，把 HEX 貼到選色器頂部的十六進位欄位——也就是接受 #RRGGBB 字串的欄位。按下 Enter 套用。
- 在 Sketch 中，把 HEX 貼到填色或邊框的色票。Sketch 會在輸入時辨識貼上的十六進位字串並送出該值。
- 在 Adobe XD 中，點擊填色或描邊的選色器，把 HEX 貼到輸入欄。XD 會在內部把該值標準化為 RGB 並更新色票。
- 對調色盤中的每個色票重複相同步驟。把這些色彩儲存為樣式、元件或變數，讓檔案的其他部分以名稱引用它們。
如果你複製的是 RGB 格式，Photoshop 和 Illustrator 的選色器也接受貼上的 rgb(r, g, b) 值。兩種方式都可以;HEX 通常比較快，因為它是一段簡短字串，而不是三個以逗號分隔的數值。
為什麼 HSL 在反覆調整調色盤時很有幫助
HSL 是對應色輪的格式，這也是產生器用它來計算配色的原因。每組配色都是 0–360° 色相圓上的旋轉，以簡單的角度運算加上正確的循環處理——所以 350° 加上 30° 會落在 20°，而不是 380°。
實作範例，#3b82f6 的互補色: 1. 把基準 HEX 轉成 HSL:#3b82f6 → 色相 ≈ 217°，飽和度 ≈ 91%，亮度 ≈ 60%。 2. 套用互補規則 (色相旋轉 +180°):217° + 180° = 397°。 3. 把色相繞回 0–360° 的範圍內:397° − 360° = 37°。 4. 最終的互補色相:37° (一種橘色)，飽和度同樣為 91%，亮度同樣為 60%。 產生器會在你的瀏覽器中執行這三個步驟，因此你點選的互補色票，就是用你可以手動套用的相同公式計算出來的。
其他配色方案同樣是機械化的。類似色在基準色相左右 ±30° 偏移 (所以 217° ± 30° = 187° 和 247°)。三角配色彼此間隔 120° (217°、337° 和 97°)。矩形配色彼此間隔 90° (217°、307°、37° 和 127°)。分裂互補色則位於基準色的 +150° 和 +210°。單色配色固定色相，只調整亮度值。一旦取得任何色票的 HSL 讀數，你可以撰寫 CSS hsl() 函式並只改變第三個值——亮度——來即時產生色調與明暗變化，而無需離開樣式表:hsl(217 91% 60%) 作為基準色，hsl(217 91% 70%) 作為較淺的色調，hsl(217 91% 45%) 作為較深的暗色。
套用調色盤後檢查對比度
和諧的調色盤並不自動代表它符合無障礙標準。互補色在色輪上提供高對比，但處於對立色相的高彩度組合，如果兩者都很亮或都很暗，仍然可能無法通過 WCAG 文字／背景對比測試。把色彩放到實際版面後，請將每組文字與背景配對跑過對比檢查工具。該工具讀取的 HEX 和 RGB 值，正是你剛才貼進 CSS 的數值，因此不需要重新輸入。內文請以至少 4.5:1 的比例為目標，大型文字則以 3:1 為目標，這兩個都是 WCAG 2.2 AA 的門檻;任何未達標的調色盤在上線前都應調整亮度或飽和度。
想深入了解如何從單一基準色建立網站調色盤，可以參考 從單一基準色建立網站調色盤 指南，其中延續了這套工作流程;用於無障礙對比的調色盤產生器 指南則是把產生器與對比檢查步驟一步步搭配使用。配色方案所依據的色彩理論——包括色輪上互補、類似和三角位置之間的關係——在 Wikipedia 的色彩理論頁面中有詳細說明。