这个工具是什么
HEX to HSL 通过与 HEX to RGB 相同的 HEX 解析规则得到 RGB,再计算色相、饱和度与亮度。HSL 适合观察配色关系和调整同色系的亮暗。
如何使用
- 输入 3 位或 6 位 HEX,可以带或不带 #。
- 查看 HSL 输出和 H / S / L 的独立数值。
- 核对颜色预览后复制 HSL。
- 点击“清空”移除输入,或载入示例。
使用示例
- #ff0000 → hsl(0, 100%, 50%)。
- #00ff00 → hsl(120, 100%, 50%);#0000ff → hsl(240, 100%, 50%)。
- #808080 → hsl(0, 0%, 50.2%);#ffffff → hsl(0, 0%, 100%)。
计算原理
先将 RGB 除以 255,求最大值 max、最小值 min 与差值 delta。亮度 L = (max + min) / 2;有彩色时 S = delta / (1 − |2L − 1|),色相根据最大通道在色环上的位置求得。灰色的 H 和 S 定义为 0,显示时才合理舍入小数。
常见用途
- 理解设计稿中的色相与亮度。
- 把 HEX 常量转换为方便调色的 HSL。
- 验证纯色、灰色、黑色和白色的 HSL 数值。
隐私说明
所有输入、计算、CSS 生成和预览都在当前浏览器中完成,不会上传用户内容,不使用后台、数据库、在线 API 或第三方 CDN,也不会自动保存您的输入。
FAQ
HSL 的三个分量是什么?
H 是色相角度,S 是饱和度百分比,L 是亮度百分比。
Hue 为什么使用角度?
色相按色环表示,一圈为 360°,0° 与 360° 指向同一位置。
灰色为什么显示 H 为 0?
当三个 RGB 通道相等时没有特定色相,工具约定 H 为 0、S 为 0%。
转换结果会有精度误差吗?
内部计算使用浮点数,输出保留合理小数位,文本舍入可能让反向转换出现轻微差异。