什麼是 HSL 轉 RGB 轉換？
HSL（色相、飽和度、明度）是一種為人類直覺設計的色彩模型。色相以 0–360 度表示色環上的位置，飽和度和明度則以百分比表示。RGB（紅、綠、藍）則是數碼熒幕直接用來控制像素發光的模型，每個通道取值 0–255。HSL‑to‑RGB 轉換就是將前者的一組參數，精確映射到後者的三個數字，以便在 CSS、Canvas 或其他程式碼中使用。
這個頁面做的正是這件事：你輸入一組 HSL 值（例如 243, 75%, 59%），工具立即顯示對應的 RGB（79, 70, 229），同時更新 HEX、HSV、CMYK、LAB 等多個常用格式。所有轉換都在你的瀏覽器內完成，資料不會上傳到任何伺服器。
為什麼這個轉換與別不同？
這個工具的核心價值在於兩個特點。
第一，HSL 是為人類推理而設計的。 當你調整明度時，色相保持不變；調整飽和度時，色相和明度都不受影響。這讓設計師可以直覺地建立配色方案或主題色階，而不必逐個調整 RGB 數值。RGB 則沒有這種直觀性：改變一個通道的值，往往同時影響顏色、飽和度和亮度。
第二，轉換是無損的。 每一個有效的 HSL 值都對應一個唯一的 RGB 三元組，而且這個 RGB 值必定落在顯示範圍內（0–255）。這與 LAB 或 CMYK 轉 RGB 不同——後者經常出現「色域外」顏色，需要裁剪或近似處理，造成色差。HSL 和 RGB 之間是雙向一一對應，沒有資訊損失，也沒有色彩偏移。
輸入與輸出格式詳解
輸入欄位
- 色相（Hue）：0–360 的整數，代表色環角度。
- 飽和度（Saturation）：0%–100% 的百分比。
- 明度（Lightness）：0%–100% 的百分比。
輸入時須用逗號分隔，例如 243, 75%, 59%。如果格式不正確，頁面會顯示提示：「Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.」
輸出欄位（全部即時更新）
| 格式 | 數值範圍 | 範例（對應輸入 243, 75%, 59%） |
|---|---|---|
| HEX | #RRGGBB | #4F46E5 |
| RGB | 0–255 | 79, 70, 229 |
| HSL | 0–360, %, % | 243°, 75%, 59% |
| HSV | 0–360, %, % | 243°, 72%, 90% |
| CMYK | 0–100% | 66%, 69%, 0%, 10% |
| LAB | L* 0–100, a* b* ±128 | 47, 28, -63 |
注意：CMYK 輸出只是一個螢幕上的估算值。實際印刷效果會因紙張、油墨和打印機特性而有顯著差異，不能用於專業打印作業。
運作原理與邊界情況
轉換的數學基礎是標準的 HSL‑to‑RGB 演算法，常見於 CSS Color Module Level 4 規範。步驟大致如下：
- 將飽和度和明度從百分比轉為 0–1 的小數。
- 根據明度計算中間變量：
- 若明度 ≤ 0.5，則
t2 = 明度 × (1 + 飽和度) - 否則
t2 = 明度 + 飽和度 − 明度 × 飽和度 t1 = 2 × 明度 − t2
- 若明度 ≤ 0.5，則
- 將色相除以 60 得到區間，分別計算 R、G、B 通道的暫態值，然後映射回 0–255 整數。
邊界情況
- 明度為 0%：RGB 必為 (0,0,0)，黑色。
- 明度為 100%：RGB 必為 (255,255,255)，白色。
- 飽和度為 0%：RGB 為灰階，三個通道相等，色相值無效（但工具仍會保留輸入的色相）。
- 色相超出 0–360 範圍？工具會視為無效輸入並顯示錯誤提示。
- 由於轉換無損，你不會看到因色域裁剪而產生的顏色跳變——這點與從 LAB 或 CMYK 轉換時完全不同。
誰需要這個工具？
- 設計師 在用 HSL 構建調色板或主題色階時，需要知道對應的 RGB 數值來寫入設計規格或匯出給開發者。
- 前端開發者 從設計工具（如 Figma、Sketch）取得 HSL 值後，要轉為 CSS 的
rgb()或 HEX 使用。雖然 CSS 現在也支援hsl()，但舊程式碼、Canvas API 或某些第三方函式庫仍只接受 RGB。 - 任何偏好以人類友好方式思考顏色的人：HSL 讓你直覺地描述「這種藍色的飽和度降低一點、明度調暗」，然後取得熒幕能顯示的實際數字。
- 教學或學習用途：觀察同一色相在不同飽和度/明度下的 RGB 變化，可以加深對色彩模型的理解。
常見問題 FAQ
Q: 為什麼 CMYK 的數值不準確？ A: 因為 CMYK 是印刷用的減色模型，需要配合具體的油墨、紙張和印刷曲線才能精確轉換。螢幕上顯示的 CMYK 只是一個基於標準 ICC 配置的估算值，不應用於打樣或印前準備。
Q: 我把 HSL 轉成 RGB 後再轉回 HSL，會得到原來的數值嗎？ A: 會的。由於轉換是無損且一一對應的，只要輸入的 HSL 在有效範圍內，雙向轉換會返回完全相同的值。但需要注意，RGB 整數化（0–255）會損失極小的小數精度，不過實務上這從不構成問題。
Q: 為什麼輸入「0, 0%, 50%」會得到 RGB (128,128,128) 而不是灰色？ A: 飽和度為 0% 時，所有色相都對應同一組灰階 RGB。工具仍然保留你輸入的色相值（0°），但實際上該色相無意義。CSS 規範同樣容許這種情況。
Q: 工具支援 RGBA 或透明度嗎？
A: 這個頁面專注於純色轉換。HSL 本身不包含 Alpha 通道，但你可以將輸出的 RGB 配合 CSS rgba() 使用，自己加入透明度值。
Q: 色相 360° 和 0° 有什麼分別？ A: 在色環上 360° 等同 0°（都是紅色）。部分工具會將 360° 視為有效輸入，本工具則建議使用 0–359 範圍。輸入 360° 可能被視為無效，請用 0° 代替。
Q: 轉換需要網絡嗎？ A: 不需要。所有計算都在你的瀏覽器內以 JavaScript 完成。沒有任何顏色數據離開你的裝置。