CSS 与前端开发工具

HEX to HSL

把 HEX 颜色转换为 CSS hsl(),分别查看 H、S、L 数值。

输入参数

浏览器本地处理

实时预览

参数修改后自动更新
可直接选择或复制

将 HEX 转换为 HSL,查看色相、饱和度、亮度与真实颜色预览。

输入内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

HEX to HSL 通过与 HEX to RGB 相同的 HEX 解析规则得到 RGB,再计算色相、饱和度与亮度。HSL 适合观察配色关系和调整同色系的亮暗。

如何使用

  1. 输入 3 位或 6 位 HEX,可以带或不带 #。
  2. 查看 HSL 输出和 H / S / L 的独立数值。
  3. 核对颜色预览后复制 HSL。
  4. 点击“清空”移除输入,或载入示例。

使用示例

  • #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%。

转换结果会有精度误差吗?

内部计算使用浮点数,输出保留合理小数位,文本舍入可能让反向转换出现轻微差异。

返回开发者工具分类首页