HEX 转 HSL 怎么转 - 颜色换算方法与示例

🌟 HSL 为什么适合调色#

HEX 和 RGB 描述的是”红绿蓝各多少”，而 HSL 描述的是更符合直觉的三个维度：

• H（Hue）色相：0°~360°，决定”是什么颜色”；
• S（Saturation）饱和度：0%~100%，决定”鲜艳程度”；
• L（Lightness）亮度：0%~100%，决定”明暗”。

调色时”我想把蓝色调亮一点”，用 HSL 只需改 L，直观得多。星点颜色格式转换支持 HEX ↔ HSL 互转。

🧮 HEX 转 HSL 的步骤#

以 #409eff 为例：

1. HEX 拆成 RGB：#409eff → (64, 158, 255)；
2. 归一化到 0~1：(0.251, 0.620, 1.000)；
3. 求最大/最小值：max=1.000，min=0.251；
4. 亮度 L = (max + min) / 2 = 0.625 → 62.5%；
5. 饱和度 S：delta = max − min = 0.749；S = delta / (1 − |2L − 1|) = 0.749 / 0.749 = 1.0 → 100%；
6. 色相 H：最大通道是蓝（B），H = 60 × (4 + (R − G) / delta) = 60 × (4 + (0.251 − 0.620) / 0.749) ≈ 60 × 3.508 ≈ 210°。

结果：hsl(210, 100%, 63%)。

📋 常见颜色对照#

💡 用 HSL 做调色#

这正是颜色调整工具背后的逻辑。

⚠️ 注意#

• HSL 的”亮度”与”感知亮度”不完全一致：黄色和蓝色在同样 L 下，人眼感觉亮度不同；
• 追求感知均匀的调色，可用 OKLCH（见专业色彩）。

🔧 常见问题#

💬 总结#

HEX 转 HSL 就是”先转 RGB，再按公式求 H/S/L”。记不住没关系，用颜色格式转换输入即得。理解 HSL 后，调色会更直觉。

立即体验：访问 颜色格式转换