在线 Hex 转 HSL 颜色
把 `#RGB` / `#RRGGBB` / `#RRGGBBAA` 转成 CSS 可用的 `hsl()` / `hsla()`，并显示色块。设计师从取色器拿到 hex、却要在样式里写 HSL 调节明度/饱和度时，用这一页最快。
HSL 用色相、饱和度、亮度描述颜色，调「淡一点/暗一点」比改 hex 更直观。
带 alpha 的 8 位 hex 会转到 hsla。缺透明时输出 hsl 即可。
同一视觉色在不同色彩空间可能略有差，以预览色块为准。
如何转换
- 输入 hex
- 查看 HSL 与色块
- 复制到 CSS
转成 HSL 能帮你什么
- 方便在 CSS 里做深浅变体。
- 与现有 hex 设计稿对齐。
- 即时预览减少来回切换。
场景
- 把品牌色 hex 写成 hsl 变量
- 给按钮做 hover 明度变化
- 检查带透明度的 hex
提示
- 可带或不带 `#`。
- 短写 `#abc` 等价 `#aabbcc`。
- 复制时注意是否需要 alpha。
例子
| 输入 | 输出 | 说明 |
|---|---|---|
| #FF5733 | hsl(...) | 不透明 |
| #FF573380 | hsla(...) | 半透明 |
Hex 转 HSL 常见问题
- 和 RGB 页关系？
- 站内另有 hex↔RGB。HSL 更适合感知上的明暗调节。
- 结果和设计软件不一致？
- 不同软件色域/舍入不同，以你目标平台渲染为准。