什麼是 RGB 轉 HSL？
RGB 是透過混合紅（Red）、綠（Green）、藍（Blue）三道光線來描述顏色，每個通道的數值範圍都是 0 到 255。HSL 則用三個更直覺的數字來表示同一個顏色：色相（Hue，顏色在 0-360° 色環上的位置）、飽和度（Saturation，顏色有多鮮豔，0-100%）以及亮度（Lightness，顏色有多亮或多暗，0-100%）。對設計師來說，HSL 通常更好掌握，因為調整亮度或飽和度時，就能直接對應到「更亮」、「更暗」、「更鮮豔」或「更接近灰色」的效果。
如何使用這個轉換器
輸入顏色的紅、綠、藍三個數值，每個都介於 0 到 255 之間。工具會立即算出對應的 HSL 數值，可直接以 hsl(H, S%, L%) 的格式貼進 CSS 使用。
公式拆解
首先把每個通道都除以 255 做正規化，得到 0 到 1 之間的數值。令 max 與 min 分別為這三個數值中的最大值與最小值。亮度為 \(L = (max + min) / 2\)。若 max 等於 min，代表這是一個灰階顏色，此時飽和度與色相皆為 0。否則，當 \(L > 0.5\) 時，飽和度為 \((max - min) / (2 - max - min)\)；當 \(L \le 0.5\) 時，飽和度為 \((max - min) / (max + min)\)。色相則依據哪一個通道為最大值來推算，並換算成角度（0-360）。
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$$$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$$$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
實際範例
以番茄紅 RGB(255, 99, 71) 為例：正規化後 = (1.0, 0.388, 0.278)。max = 1.0、min = 0.278，因此 \(L = 0.639 \to 63.9\%\)。由於 \(L > 0.5\)，\(S = (1.0 - 0.278) / (2 - 1.0 - 0.278) = 0.722 / 0.722 = 1.0 \to 100\%\)。最大值為紅色，所以 \(H = 60 \times ((0.388 - 0.278) / 0.722) = 60 \times 0.1525 = 9.1^{\circ}\)。最終結果：hsl(9, 100%, 64%)。
常見問題
為什麼灰色的色相是 0？當紅、綠、藍三個數值相等時，沒有任何一個顏色佔主導，色相此時是未定義的，依慣例會以 0 表示。
HSL 跟 HSV／HSB 是一樣的嗎？不一樣。HSL 與 HSV 共用相同的色相，但在飽和度與第三個數值的計算方式上有所不同；本工具輸出的是 HSL。
結果可以直接貼到 CSS 嗎？可以。現代瀏覽器都能直接接受 hsl(9, 100%, 64%) 這種寫法作為色彩值。
