顯示器原生與人類直覺的橋樑：RGB 轉 HSL 頁面深度解析
RGB 是顯示器發光的語言，HSL 則是人類描述顏色的方式。這個頁面所做的，正是將一個由三個 0–255 整數組成的 RGB 數值，即時轉換為 HSL 表達——色相以 0–360° 的圓圈表示，飽和度與明度則以百分比呈現。不同於一般轉換工具，這個工具的核心在於 HSL 模型本身：當你調整明度時，色相保持不變，這讓它成為生成色板、主題及可存取對比變體的理想選擇。RGB 數值不過是原始光強度，而 HSL 是為人類推理顏色而設計的。
RGB 如何代表螢幕上的顏色
顯示器透過紅、綠、藍三種原色光的疊加混合來產生色彩，這就是加法混色（additive mixing）。每個通道都採用 0 至 255 的整數級別，共 256 級，對應 8 位元色深。數值 0 代表該色光完全關閉，255 則代表全開。這個範圍源自二進制計算的方便性，並且在標準 RGB 工作空間（sRGB）中定義了顯示器的色彩表現方式。
輸入 RGB 時必須採用三個 0–255 的整數，並以逗號或空格分隔，例如 79, 70, 229。如果輸入值超出範圍或格式不符，工具會顯示提示訊息：「請輸入 0–255 的三個數字，例如 79, 70, 229。」這是因為工具無法將無效的輸入映射到可顯示的顏色空間。
HSL 如何建模人類感知
HSL 模型將顏色分解為三個直觀分量：色相（Hue）以 0–360 度表示顏色在色環上的位置，0° 為紅色，120° 為綠色，240° 為藍色；飽和度（Saturation）以百分比表示色彩的純度，0% 為灰色，100% 為完全飽和；明度（Lightness）以百分比表示顏色相對於黑白的亮度，0% 為黑色，100% 為白色。
這種模型特別之處在於明度與色相互相獨立。改變明度不會影響色相，因此設計師可以自由產生同一色相的不同深淺（tint、shade、tone）。例如 RGB 值 79, 70, 229 轉換為 HSL 為 hsl(243, 75%, 59%)——只需調整明度百分比就能獲得一系列和諧的顏色。
為何 HSL 是調色板與主題的理想選擇
在 UI 設計中，建立一個品牌顏色的明暗變體是常見需求。如果使用 RGB，直接增減各通道數值往往會意外地改變色相，因為 RGB 通道之間缺乏線性關聯。HSL 則允許你鎖定色相，只調整明度百分比，從而保持顏色的「身份」不變。對於主題構建者來說，這點尤其關鍵：只需儲存一個 HSL 色相值，再配合不同的明度與飽和度組合，就能產生亮色主題與深色主題。
此外，HSL 的明度通道非常適合製作順序式色彩量表——數據可視化設計師需要一系列感知上亮度遞增的顏色，HSL 的明度正好提供直觀的控制。前端開發者可以將設計標記中的 RGB 轉換為 CSS 的 hsl() 函數，方便在樣式表中動態調整。
RGB 與 HSL 轉換的數學原理
轉換過程首先將 RGB 從 0–255 歸一化為 0–1 的浮點數，記為 R'、G'、B'。然後找出三個數值中的最大值（Cmax）與最小值（Cmin），計算明度 L = (Cmax + Cmin) / 2，色度 C = Cmax – Cmin。飽和度 S 則根據 L 分兩種情況：
- 如果 Cmax = Cmin（即灰色），則 H 與 S 均為 0。
- 否則，S = C / (1 – |2L – 1|)。
色相 H 的計算依賴哪個通道是最大：
- 若 Cmax = R'，H = 60° × ((G' – B') / C mod 6)
- 若 Cmax = G'，H = 60° × ((B' – R') / C + 2)
- 若 Cmax = B'，H = 60° × ((R' – G') / C + 4)
若結果為負，則加上 360°。最終 H 的範圍是 0–360°，S 與 L 轉為百分比。頁面支援反向轉換：直接輸入 HSL 數值（如 243, 75%, 59%），工具會即時轉回 RGB。無效的 HSL 輸入則顯示：「請輸入 0–360 的色相及兩個百分比，例如 243, 75%, 59%。」
所有轉換均在瀏覽器端執行，不會上傳任何數據。
HSL 的可存取性應用
Web 內容可存取性指引（WCAG）要求前景與背景之間有足夠的對比度，通常以比率計算（如 4.5:1）。設計師可以利用 HSL 的明度通道，在不改變色相的前提下調整對比度。例如，一個品牌色相 243° 可能原本明度 59%，若背景需要更暗，可降低明度至 30%，同時保持相同色相與飽和度，從而維持色彩識別。這種精確控制是 RGB 難以直接提供的。
HSL 的限制與替代模型
儘管 HSL 直觀，它並非感知均勻。例如，黃色與藍色在相同明度百分比下，人眼感覺的亮度可以相差很大。這是因為 HSL 的「明度」計算基於線性加權，而非人眼對不同波長敏感度的非線性反應。對於追求感知均勻的應用（如科學可視化），LAB 色彩空間更為適合。LAB 將明度與兩個顏色對抗通道（a* 與 b*）組合，其明度分量更貼近人類視覺。
頁面同時提供 LAB 與 CMYK 輸出。CMYK 是基於顯示器的屏幕估算，不能用於專業印刷。若從 LAB 或 CMYK 輸入一個超出可見 RGB 色域的值，工具會自動將其調整至最接近的可顯示顏色；轉換回原空間時可能出現輕微偏移。這反映了 RGB 與 HSL 均受顯示器色域限制的事實。
常見問題
Q: 我可以輸入十六進制顏色代碼嗎？ A: 不可以。此頁面只接受 RGB 數字格式（三個 0–255 整數）或 HSL 格式（色角度與兩個百分比）。不過轉換結果會顯示對應的 HEX 值，你可以直接複製。
Q: 為什麼 CMYK 輸出不適合印刷？ A: 因為頁面是根據顯示器組成的估算，沒有考慮特定印刷機、油墨與紙張的 ICC 設定。你應該使用專用軟體進行印刷前的顏色證明。
Q: 如果我輸入的 LAB 值轉換後與預期不同？ A: LAB 色域比 sRGB 大。若 LAB 值落在 sRGB 色域外，工具會壓縮到最近的顯示顏色。若需要精確匹配，請使用支援色域映射的專業工具。
Q: 所有轉換都在本地進行嗎？ A: 是的。任何顏色的計算均在你的瀏覽器內完成，不會傳送到伺服器。
Q: 為什麼 HSL 明度調整後，顏色看起來有時比預期暗？ A: 因為 HSL 明度是基於數學平均，而非人類亮度感知。黃色在相同明度值下看起來比藍色亮。若要更均勻，可考慮使用 LAB 的 L 分量。
Q: 我可以同時轉換多個顏色嗎？ A: 此頁面一次只處理一個顏色，但所有輸出格式都會即時更新。