HEX 转 HSL 转换器

HSL 用色相（Hue，色轮上的角度）、饱和度（Saturation，颜色有多浓）和亮度（Lightness，离黑色或白色有多近）来描述颜色。它比 HEX 更便于手动微调：保持色相不变、降低亮度，就得到同一种颜色的深色版本。这个转换器把 HEX 和 rgb() 代码转换成 hsl() 和 hsla()（包括现代的空格分隔写法），也能把 HSL 转回 HEX 和 RGB，并展示最大值/最小值公式的每一步。

使用方法

1. 选择 HEX/RGB → HSL 或 HSL → HEX/RGB。
2. 输入 HEX 代码（3、4、6 或 8 位）或 rgb()，或者输入色相、饱和度和亮度。
3. 选择显示的小数位数。
4. 复制结果；计算过程表会展示计算方式。粘贴一个列表即可批量转换。

计算公式

L = (max + min) ÷ 2 · S = Δ ÷ (1 − |2L − 1|) · H = 60° × ((G′ − B′) ÷ Δ mod 6)（R 最大时）、((B′ − R′) ÷ Δ + 2)（G 最大时）、((R′ − G′) ÷ Δ + 4)（B 最大时）

R′、G′、B′ 是各通道除以 255 的值；max、min 和 Δ = max − min 都基于它们计算。灰色的 Δ = 0，所以饱和度和色相为 0。转换回去时，C = (1 − |2L − 1|) × S，X = C × (1 − |(H ÷ 60) mod 2 − 1|)，m = L − C ÷ 2。

示例

以 #FF6347（番茄红）为例：R′ = 1，G′ = 0.3882，B′ = 0.2784。最大值 1，最小值 0.2784，Δ = 0.7216，所以 L = 0.6392，S = 0.7216 ÷ (1 − 0.2784) = 1，H = 60 × (0.1098 ÷ 0.7216) = 9.1°，即 hsl(9.1, 100%, 63.9%)。反过来，hsl(210, 50%, 40%) 得到 C = 0.4，X = 0.2，m = 0.2，RGB (51, 102, 153) = #336699。