HSL 颜色微调器 - 滑块调节色相/饱和度/亮度

HSL 代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。色相决定颜色的种类（如红、蓝、绿），以角度值 0°-360° 表示；饱和度决定颜色的鲜艳程度，0% 为灰色，100% 为最鲜艳；亮度决定颜色的明暗，0% 为纯黑，100% 为纯白，50% 为正常亮度。相比 RGB，HSL 更符合人类直觉。

本工具会自动完成转换。HSL 先转换为 RGB（红绿蓝三通道各 0-255），再将 RGB 各通道转为两位十六进制数拼接即得 HEX 码。例如 hsl(240, 80%, 50%) → RGB(59, 59, 240) → #3b3bf0。您也可以直接在上方 HEX 输入框中粘贴 HEX 值反向解析。

色相滑块背景模拟了 0° 到 360° 的完整色相环，从红色开始依次经过橙、黄、绿、青、蓝、紫再回到红色。这让您能直观地定位目标色相，无需记忆角度数值。

饱和度和亮度滑块的背景颜色会根据当前色相动态变化，帮助您预览调整效果。饱和度滑块展示从灰色到该色相最鲜艳状态的渐变；亮度滑块展示从纯黑到纯白的变化，中间经过该色相最纯的颜色。

HSL 的亮度（Lightness）是从黑到纯色再到白的对称轴，50% 时颜色最纯；HSB/HSV 的明度（Brightness/Value）则是从黑到纯色的单向轴，100% 时颜色最纯。HSL 更符合人类对"明暗"的感知，也是 CSS 原生支持的颜色格式。