十六进制转HSL转换器

使用方法

十六进制转HSL转换器三步：

1. 在「十六进制色值」里填 #RRGGBB，演示 #0080FF；3 位缩写如 #08F 也支持。
2. 点「换算」，结果区给出 hsl(210, 100%, 50%) 与色块。
3. 点「复制 HSL」拿走，或「导出对照表 CSV」保存常见颜色的换算表。

十六进制转HSL转换器能解决什么

它适合需要 HSL 写法的场景：

• 调色更直观：HSL 里改一个 S 就变灰、改 L 就变亮，比手改十六进制方便。
• 生成色阶：拿到主色 HSL 后，固定 H、S 微调 L 即可做出一组同色系。
• 对齐设计：设计给 #HEX，代码要 hsl()，一步换好。

还有一个常被忽略的用途是校验设计稿：当设计师标的是 hsl()、而接口或素材返回的是 #HEX 时，用本页把 #HEX 换算一遍，就能确认两边指的是同一个颜色，避免主题色对不上却发现不了。

本页不做的事：不做 HSL 转 HEX 的反向换算（请用站内 HSL 转 RGB 工具），也不生成配色方案。

原理和变量

① 用了哪个具体函数：先把 6 位十六进制拆成 R、G、B 三个 0～255 整数并归一化到 0～1，再按标准公式求最大最小值 max、min，用 L=(max+min)/2、S=(max-min)/(1-|2L-1|)、并按 max 落在哪个通道求 H。

② 关键参数为什么这样取：H 用 60° 分段再乘 6，是因为色相环共 360°、每 60° 一段；S 公式带绝对值，是为了让 L 在 0.5 两侧都能正确归一。

③ 遵循哪个标准：换算与 W3C CSS Color 的 hsl() 定义一致，结果与浏览器渲染应吻合。

④ 输入怎么变成输出：#0080FF → R=0、G=128、B=255；max=255、min=0，L=50%；S=(255-0)/(255)=100%；max 在 B 通道得 H=210°。

⑤ 边界与阈值：仅接受 3 位或 6 位十六进制；含非法字符或长度不对会提示；灰度色（R=G=B）的 S 为 0，H 视为 0。

⑥ 常见误用的正确解释：HSL 的 L 不是感知亮度，同一 L 下不同 H 观感明暗不同；H 为 0 不代表「没有颜色」，S 才决定是否灰。

完整示例

演示输入 #0080FF，展开为 R=0、G=128、B=255。推导：

• max = 255、min = 0；亮度 L = (255+0)/2 ÷ 255 = 50%。
• 饱和度 S = (255−0)/(255−|2×127.5−255|) → 归一后 = 100%。
• max 落在 B 通道，H = 60×(4 + (R−G)/(max−min)) = 60×(4 + (0−128)/255) ≈ 210°。
• 结果：hsl(210, 100%, 50%)。

再试 #FF0000 得 hsl(0, 100%, 50%)，纯灰 #808080 得 hsl(0, 0%, 50%)。演示仅作说明。

输入范围与对照表

12 组常见 #HEX 的 HSL 对照（H=色相，S=饱和度，L=亮度）：

结果边界和舍入

H 取整到度，S、L 四舍五入取整数百分比，因此相邻颜色可能落到同一个 HSL。灰度色的 S 为 0、H 记为 0；纯黑与纯白的 S 与 H 都视为 0，只有 L 分别为 0% 与 100%。

当 max 与 min 相等（即灰色）时色度为 0，色相在数学上没有定义，本页统一记为 H=0；这不影响颜色还原，因为 S=0 时无论 H 取多少，结果都是同一个灰阶。

另一个细节：本页把 R、G、B 归一化后直接代入公式，未做伽马校正，因此与 sRGB 线性空间的定义略有不同。对日常取色而言这点差别肉眼难辨，但做精确色彩管理时请注意。

本页输出 6 位等价色的 HSL，不含 alpha；如需透明度请另行指定。

常见问题

相关工具

• 图片颜色取色
• 颜色名字查询
• 色盲模拟
• Transparent颜色计算器
• 浅色颜色生成器
• 颜色对比度检测
• RGB转HSL转换器