什么是RGB转HSL？
RGB通过混合红、绿、蓝三种光来描述颜色，每个通道的取值范围都是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 = (C_{max} + C_{min}) / 2\)。如果max等于min，说明这是一种灰色，因此饱和度和色相都为0。否则，当 \(L > 0.5\) 时，饱和度 \(= (C_{max} - C_{min}) / (2 - C_{max} - C_{min})\)；当 \(L \le 0.5\) 时，饱和度 \(= (C_{max} - C_{min}) / (C_{max} + C_{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\) → 63.9%。由于 \(L > 0.5\)，$$S = \frac{1.0 - 0.278}{2 - 1.0 - 0.278} = \frac{0.722}{0.722} = 1.0 \to 100\%$$最大值为红色通道，所以 $$H = 60 \times \left(\frac{0.388 - 0.278}{0.722}\right) = 60 \times 0.1525 = 9.1^{\circ}$$最终结果：hsl(9, 100%, 64%)。
常见问题
为什么灰色的色相是0？当红、绿、蓝三个通道值相等时，没有任何一种颜色占主导地位，因此色相是未定义的，按惯例记为0。
HSL和HSV/HSB是一回事吗？不是。HSL和HSV的色相相同，但饱和度和第三个数值的计算方式不同；本工具输出的是HSL。
转换结果可以直接粘贴到CSS里吗？可以——现代浏览器都支持直接将hsl(9, 100%, 64%)作为颜色值使用。
