什么是 HSL 转 Hex 转换器？
这款工具可以把以 HSL 模型表示的颜色——即色相（Hue）、饱和度（Saturation）和亮度（Lightness）——转换成 CSS、设计软件和网页开发中常用的十六进制（Hex）表示法。HSL 对人来说很直观：色相决定在色环上选哪种颜色，饱和度控制颜色的鲜艳程度，亮度则决定颜色偏暗还是偏亮。而 Hex（例如 #3F7FBF）才是浏览器和各类工具真正能识别的格式。
如何使用
分别输入 0 到 360 度的色相、0 到 100% 的饱和度，以及 0 到 100% 的亮度，即可读取生成的 Hex 颜色代码、RGB 各通道数值，并看到实时的颜色色块预览。这套转换方法通用，适用于任何颜色，无需安装任何软件。
转换公式详解
转换时首先计算色度 \(C = (1 - |2L - 1|)\cdot S\)，其中 S 和 L 均为 0–1 之间的小数。辅助变量 \(X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right)\) 用于处理原色之间的过渡渐变，再用亮度偏移量 \(m = L - \tfrac{C}{2}\) 把结果调整到正确的亮度水平。根据色相落在哪个 60° 区间，(R′,G′,B′) 三个通道会分别从 C、X 和 0 中取值。每个最终通道值为 \(\text{round}((c^{\prime} + m)\cdot 255)\)，而 Hex 字符串就是把 R、G、B 各自的两位十六进制数依次拼接起来。
$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$$$\left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
实例演示
以 HSL(210, 50%, 50%) 为例：\(S = 0.5\)，\(L = 0.5\)，因此 \(C = (1 - |0|)\times 0.5 = 0.5\)。\(H/60 = 3.5\)，于是 \((3.5 \bmod 2) = 1.5\)，\(X = 0.5\times(1 - |0.5|) = 0.25\)。\(m = 0.5 - 0.25 = 0.25\)。色相 210 落在第 3 区间（180–240），对应 \((R^{\prime},G^{\prime},B^{\prime}) = (0, X, C)\)。于是 \(R = \text{round}(0.25\times 255) = 64\)，\(G = \text{round}(0.5\times 255) = 128\)，\(B = \text{round}(0.75\times 255) = 191\) → #4080BF。
常见问题
色相会循环吗？会的——色相 360 与 0 是同一种红色，本工具会自动把任意数值归一化到 0–360 范围内。
为什么我的通道值有时会差 1？因为这里采用四舍五入到最接近的整数，相比某些直接截断（向下取整）的工具，结果可能相差 ±1；四舍五入其实更准确。
能得到灰色吗？可以——把饱和度设为 0，无论色相取什么值，三个通道都会等于 \(\text{round}(L\times 255)\)，从而得到中性灰色。
