什麼是 RGB 轉 HSL 轉換器？
這個工具能把以 RGB 模型表示的色彩（紅、綠、藍，每個數值介於 0–255）換算成 HSL 模型（色相 Hue、飽和度 Saturation、亮度 Lightness）。對設計師來說，HSL 通常更直覺，因為它把色彩的「色調」（色相）與「鮮豔程度」（飽和度）、「明暗程度」（亮度）分開來描述。這套換算方式是通用的，不受任何裝置或地區限制。
使用方式
分別輸入色彩的紅、綠、藍三個數值，每個介於 0 到 255 之間，按下計算即可得到對應的 HSL 三組數值，可以直接以 hsl(H, S%, L%) 的格式貼進 CSS 使用。
公式詳解
首先將每個色版除以 255 做正規化，使其落在 0–1 之間。設 max 與 min 分別為這三個值中的最大與最小值，並令 \(\Delta = \max - \min\)。亮度為 \(L = \frac{\max + \min}{2}\)。飽和度為 \(S = \frac{\Delta}{1 - \lvert 2L - 1 \rvert}\)，當 \(\Delta = 0\)（也就是灰色）時則為 0。色相則依據哪個色版數值最大而推導，再乘以 \(60^{\circ}\)，最後換算回 0–360° 的範圍。
$$ L = \frac{C_{\max} + C_{\min}}{2}, \quad S = \frac{C_{\max} - C_{\min}}{1 - \lvert 2L - 1 \rvert} $$ $$ \text{where}\quad \left\{ \begin{aligned} R^{\prime} &= \frac{\text{Red}}{255}, \;\; G^{\prime} = \frac{\text{Green}}{255}, \;\; B^{\prime} = \frac{\text{Blue}}{255} \\ C_{\max} &= \max(R^{\prime}, G^{\prime}, B^{\prime}), \;\; C_{\min} = \min(R^{\prime}, G^{\prime}, B^{\prime}) \end{aligned} \right. $$ $$ H = 60^{\circ} \times \begin{cases} \dfrac{G^{\prime} - B^{\prime}}{\Delta} \bmod 6 & C_{\max} = R^{\prime} \\[0.6em] \dfrac{B^{\prime} - R^{\prime}}{\Delta} + 2 & C_{\max} = G^{\prime} \\[0.6em] \dfrac{R^{\prime} - G^{\prime}}{\Delta} + 4 & C_{\max} = B^{\prime} \end{cases} $$
實際範例
以番茄紅 RGB(255, 99, 71) 為例。正規化後：\(R = 1\)、\(G = 0.388\)、\(B = 0.278\)。\(\max = 1\)、\(\min = 0.278\)、\(\Delta = 0.722\)。\(L = \frac{1 + 0.278}{2} = 0.639 \rightarrow 63.9\%\)。\(S = \frac{0.722}{1 - \lvert 2 \cdot 0.639 - 1 \rvert} = \frac{0.722}{0.722} = 1 \rightarrow 100\%\)。由於 \(\max = R\)，\(H = 60 \times \left(\frac{0.388 - 0.278}{0.722}\right) = 60 \times 0.1525 \approx 9.13^{\circ}\)。結果為 hsl(9.13, 100%, 63.92%)。
常見問題
為什麼灰色的飽和度是 0？當三個色版的數值都相等時，\(\Delta = 0\)，代表沒有任何色彩資訊，飽和度無法定義——依慣例會設為 0。
H、S、L 會四捨五入嗎？畫面上顯示時會四捨五入到小數點後兩位，但實際計算的原始數值仍保有完整精度。
可以反向換算回去嗎？可以——HSL 轉 RGB 就是相反的過程，利用色相所在的區段與彩度（chroma）即可換算回來。
