在线 HSL 转 Hex 颜色
把 `hsl()` / `hsla()` 或「色相,饱和度,亮度」写法转成 hex，方便交给只认 hex 的设计稿、海报工具或旧组件库。同样带色块预览，避免抄错。
从样式代码回到设计标注时，常需要 hex。本页认常见 CSS 写法，也尽量兼容逗号分隔的三元组。
含透明时输出 8 位 hex；若下游不支持，可改回分离的 opacity。
如何转换
- 粘贴 HSL/HSLA
- 确认色块
- 复制 hex
适用情况
- CSS 变量是 HSL，设计工具要 hex。
- 快速生成色板的 hex 列表。
- 预览确认没有抄错通道。
场景
- 把 Tailwind 任意 HSL 转回 hex 给商家
- 文档里统一成 hex 色表
提示
- 饱和度与亮度一般是百分比。
- 色相可带 `deg` 或纯数字。
- 非法值会提示，请按 CSS 修正。
例子
| 输入 | 输出 | 说明 |
|---|---|---|
| hsl(9 100% 60%) | #FF5733 一类结果 | 现代写法 |
| hsla(..., 0.5) | 8 位 hex | 含透明 |
HSL 转 Hex 常见问题
- 支持 `hsl(a b c / d)` 吗？
- 按页面解析能力支持常见现代写法；失败时改用经典逗号写法再试。
- 和拾色器差一点？
- 舍入到 8 位 hex 时会有细微差，一般可接受。