HSL 转 HEX 转换器

HSL 转 HEX 转换器可将 hsl(217, 91%, 60%) 这样的 HSL 值转换为 #3B82F6 这样的十六进制代码。HSL 是按色相、饱和度、亮度设计颜色最友好的模型 — 但大多数样式表、设计令牌和 HTML 仍需要 HEX 代码，因此这一转换将两者衔接起来。

工作流提示：先用易于推敲的 HSL 调出准确颜色，再转换为 HEX，即你真正写入代码的值。

何时需要它

从设计到代码

你用 HSL 构建了配色，现在需要 HEX 代码用于主题文件或品牌规范。

紧凑分享

单个 HEX 字符串比带百分号的三个 HSL 数字更易复制粘贴。

兼容旧系统

某些工具和旧代码路径仍需要 HEX，而非 hsl() 函数。

如何将 HSL 转换为 HEX

1

输入 HSL 值

按 217, 91%, 60% 或 hsl(217, 91%, 60%) 的形式键入。色相后的度数符号可选，% 号可加可不加。

2

读取 HEX 结果

HEX 代码即时生成，实时色块同步更新，方便你确认颜色是否符合预期。

3

或直接选色

点击预览色块打开系统原生取色器直观选色 — HSL 和 HEX 字段会自动填入。

4

复制与复用

复制 HEX 代码用于样式表。下方面板还会列出同一颜色的 RGB、HSL、HSV 和 CMYK。

功能特性

即时转换

输入时 HEX 立即出现，完全在客户端运行，不向服务器发送任何内容。

灵活输入

带不带 % 号、度数符号和 hsl() 包裹都能正常工作。

预览与取色

实时色块可验证颜色，内置取色器支持直观选色。

所有格式一次呈现

每个结果都会显示 HEX、RGB、HSL、HSV 和 CMYK。

保持在范围内：色相须为 0–360，饱和度和亮度均须为 0–100。超出这些范围的值会被标记，因为它们不对应有效颜色。

常见问题

哪些 HSL 值是有效的？

色相范围为 0 到 360（度），而饱和度和亮度范围为 0 到 100 百分比。超出这些范围的值不是有效颜色。

必须包含 % 符号吗？

不必。转换器接受带或不带 % 号的饱和度与亮度 — 91% 和 91 处理方式相同。

如果值超出范围会怎样？

如果有任何值超出其有效范围，转换器会标记错误，便于你修正输入，而不是得到一个误导性的颜色。

可以粘贴完整的 hsl() 字符串吗？

可以。hsl(217, 91%, 60%) 和简单的 217, 91%, 60% 都能用 — 包裹和度数符号会被按需解析并忽略。

HEX 输出是大写吗？

是的，HEX 以大写形式返回（如 #3B82F6），这是惯例。CSS 对大写和小写 HEX 一视同仁。