HSL 轉 RGB 工具：將人眼直覺的色彩模型換算為螢幕發光數值
為什麼你需要這個轉換工具
HSL 與 RGB 是兩種截然不同的色彩描述方式，分別服務於不同的工作階段。HSL（色相、飽和度、明度）是為人類直覺設計的模型：你只需要調整明度百分比，就能在不改變色相的前提下讓顏色變亮或變暗，這使得 HSL 非常適合用於調色板生成、主題配色與設計探索。而 RGB（紅、綠、藍）則是螢幕直接使用的發光數值，每一個 0–255 的整數對應著螢幕上一個子像素的亮度。
當你在設計工具中調出一個滿意的 HSL 配色（例如色相 243°、飽和度 75%、明度 59%），要將其寫進 CSS、Canvas 或任何程式的顏色變數中時，就需要得到對應的 RGB 值（79, 70, 229）。本工具讓你直接輸入 HSL 參數，立即獲得六種常用色彩模型的數值，包含 HEX、RGB、HSL、HSV、CMYK 與 LAB，全部同步更新，無需手動跑任何公式。
不同於從 LAB 或 CMYK 轉換 RGB 時可能出現的色域外偏移，HSL 到 RGB 的轉換是無損的：每一個合法的 HSL 值都對應到一個落在顯示範圍內的 RGB 三元組，不會產生剪裁或顏色漂移。這意味著你可以在兩個模型之間反覆來回轉換而不會失去原始顏色。
輸入與輸出：所有欄位即時連動
工具接受單一輸入格式：色相（0–360 整數或小數）、飽和度（百分比字串）、明度（百分比字串），以逗號分隔。例如 243, 75%, 59%。一旦輸入正確，所有輸出欄位會立即更新。
可取得的輸出模型包括：
- HEX：如
#4F46E5，6 位數十六進位表示法。 - RGB：三個 0–255 的整數，如
79, 70, 229。 - HSL：與輸入相同的格式，方便確認轉換是否一致。
- HSV：色相、飽和度、明度，其中飽和度與明度同樣以百分比表示，但 HSV 的明度是指顏色中最大分量，與 HSL 的明度定義不同。
- CMYK：青色、洋紅、黃色、黑色，以百分比表示。請注意：螢幕上顯示的 CMYK 數值僅為近似估算，實際列印時因紙張、油墨與印表機特性差異，最終顏色可能不同。
- LAB：CIE Lab* 色彩空間，L 表示明度（0–100），a 和 b 表示色度座標（約 -128 到 127）。
所有轉換均在瀏覽器內完成，沒有任何資料被上傳至伺服器。
邊界情況與常見輸入錯誤
最常見的錯誤是忘記加上百分比符號，或使用了錯誤的數值範圍。工具會檢查輸入是否符合以下規則：
- 色相：0–360 之間的數值（可含小數）。
- 飽和度與明度：必須包含
%符號，數值範圍 0–100。
若輸入格式無效，工具會顯示提示訊息：
「Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.」
請特別注意，HSL 的色相是角度，0° 與 360° 對應同一紅色，但工具會將其視為不同的輸入值。在某些設計軟體中，色相可能被規範到 0–360 的整數，但工具接受小數以支援更精細的調整。
誰需要這個工具
- 前端開發者：設計稿中經常以 HSL 數值標註顏色，但 CSS 中的
rgb()或rgba()函式需要 0–255 整數。本工具免除手動計算的錯誤。 - 設計系統維護者：建立主題變數時，你可能希望以 HSL 定義基礎色相，再透過調整明度與飽和度衍生出一系列色票。此時你需要將每一階段的 HSL 轉換為 RGB 才能寫入程式碼。
- 視覺設計師：在 Figma、Sketch 等工具中工作時，你可能習慣用 HSL 滑桿，但最終輸出時需要 HEX 或 RGB 來確保跨平台一致。
- 任何想要理解色彩模型的人：觀察同一顏色在不同模型中的數值變化，有助於建立對色彩空間的直覺。例如，你會發現飽和度 0% 的灰色在所有模型中僅由明度決定。
色彩模型之間的根本差異
| 模型 | 維度 | 典型用途 | 備註 |
|---|---|---|---|
| HSL | 色相、飽和度、明度 | 人類直覺配色 | 明度改變不影響色相 |
| HSV/HSB | 色相、飽和度、明度（值） | 圖形軟體拾色器 | 與 HSL 明度定義不同 |
| RGB | 紅、綠、藍強度 | 螢幕發光、CSS、影像處理 | 加法模型，0–255 |
| CMYK | 青、洋紅、黃、黑 | 印刷輸出 | 減法模型，依設備而異 |
| LAB | Lab* | 跨裝置色彩管理 | 感知均勻，色域最廣 |
其中一個常見的迷思是：HSL 與 HSV 的「明度」是一樣的。實際上 HSL 的明度 (Lightness) 是最大與最小 RGB 分量的平均，而 HSV 的明度 (Value) 是最大分量。這導致相同色相、相同飽和度但不同明度定義時，兩者呈現的顏色並不相同。工具同時顯示 HSL 與 HSV 數值，方便你對照。
為什麼沒有色域外剪裁問題？
RGB 是裝置原生的色彩空間，而 HSL 是透過對 RGB 立方體進行數學轉換得來的中間表示。任何合法的 HSL 值（色相 0–360、飽和度 0–100%、明度 0–100%）都能對應到一個落在 RGB 立方體內的點。轉換公式是確定且可逆的，因此不存在「超出色域」的情況。
這與從 LAB 或 CMYK 轉換 RGB 截然不同：LAB 的色域遠大於 sRGB 或 Display P3，部分 LAB 值無法在螢幕上顯示，必須進行剪裁或壓縮，導致顏色偏移。CMYK 則因油墨吸收特性與 RGB 發光原理完全不同，其色域與 RGB 僅部分重疊，轉換時同樣需要近似處理。本工具提供的 CMYK 數值正是基於標準轉換公式的估算，不保證與任何特定印刷設定一致。
實用範例：一個完整的轉換
假設你在設計一個夜間模式的背景色，想要深藍色帶一點紫色調。你決定使用 HSL(243, 75%, 45%)。輸入後工具馬上回傳：
- HEX:
#3B37A5 - RGB:
59, 55, 165 - HSV:
243°, 67%, 65% - CMYK:
64%, 67%, 0%, 35% - LAB:
32, 22, -59
現在你可以直接將 RGB 或 HEX 寫進 CSS 中。注意 HSV 的明度 (65%) 高於 HSL 的明度 (45%)，因為定義不同。若你希望顏色更暗，只需減少 HSL 的明度百分比，色相保持不變，即可維持相同的色調感受。
常見問題（FAQ）
Q: 為什麼 HSL 的明度 50% 對應的 RGB 值座落範圍很大？ A: 因為明度是最大與最小 RGB 分量的平均。例如色相 0°（紅色）搭配明度 50% 時，RGB 值為 (255, 0, 0) 嗎？不對，因為此時明度是 (255+0+0)/3 約 85，並非 50%。實際上 HSL 的轉換公式包含校正，明度 50% 的紅色對應到約 (187, 0, 0)，這需要透過工具驗證。
Q: 同一個 HSL 值在不同瀏覽器或作業系統上會一樣嗎？ A: 本工具使用標準的 CSS 規範轉換公式（參考 CSS Color Module Level 4），與現代瀏覽器內建顏色解析結果一致。因此數值具備跨平台一致性。
Q: 我可以輸入小數點的色相嗎？例如 243.5°。 A: 可以。工具接受整數與小數色相值，因為 HSL 色相是連續的角度。這在微調色調時很有用。
Q: 工具會把 HSL 轉成哪些色域？ A: 所有輸出模型都基於 sRGB 色域。RGB 與 HEX 直接對應 sRGB 數值，LAB 則是透過 sRGB 經由線性化再轉換至 CIE XYZ，最後到 CIE Lab*。
Q: 轉換後的 CMYK 可以用來印刷嗎？ A: 僅供參考。實際印刷需要考慮紙張類型、油墨品牌與印表機曲線，最好使用專用的 ICC 設定檔進行轉換。螢幕上的 CMYK 數值無法直接套用。
Q: 如果我在 HSL 輸入欄位打錯字，工具會靜默錯誤嗎？ A: 不會。工具會顯示紅色的錯誤訊息，明確指出預期的輸入格式，幫助你修正。所有輸出欄位在錯誤期間會保留上次有效值或顯示「—」。