这个转换器支持所有CSS里的十六进制写法：6位的#3366cc、3位简写#36c，以及带透明通道的4位和8位格式，带不带#都可以。它会显示hsl()或hsla()字符串、纯数值，以及每个分量的详细拆解，下方还有一行反向的HSL转HEX工具，方便你反过来查。所有计算都在浏览器里完成，不上传、不用注册、也没有次数限制。
HEX转HSL转换器
全程在浏览器中运行，无需上传，无需注册。
CSS
hsl(220, 60%, 50%)转换过程
色相220
饱和度60%
明度50%
想反过来转换？HSL转HEX
#3366cc怎么把HEX转换成HSL
先把十六进制颜色代码拆成红、绿、蓝三个通道（0到255），再把这个颜色重新表示为色相、饱和度和明度。色相是色轮上的角度（0到360），饱和度表示颜色有多鲜艳（0%到100%），明度表示有多亮（0%到100%）。#3366cc会变成hsl(220, 60%, 50%)。这个工具在你输入的同时就会立刻算出来。
使用方法
- 1输入十六进制颜色代码. 输入或粘贴一个hex颜色，比如#3366cc（或#36c），也可以用取色器直接选颜色。#号可以不写。
- 2查看HSL数值. hsl()字符串、纯数值和实时颜色预览会随着输入即时更新，还会分别列出色相、饱和度和明度的详细数值。
- 3复制你需要的格式. 点击hsl()字符串或原始数值旁边的复制按钮即可。想反过来转换？在下方输入色相、饱和度和明度，就能得到对应的十六进制代码。
适用人群
- 前端开发者把十六进制颜色转成hsl()，这样调整hover和focus状态的明度时，不用重新挑一个全新的颜色。
- 搭建配色方案的设计师保持色相不变，只调整饱和度和明度，就能从一个品牌色衍生出深浅不同的色调。
- 维护主题和设计变量的人会把颜色存成HSL格式，因为它比十六进制字符串更容易看懂，也更方便手动调整。
- 需要在不同工具间统一颜色的人，比如Figma和大部分CSS属性用hex，而SCSS辅助函数或某些配色系统用HSL。
常见问题
这个HEX转HSL工具免费吗
是的，完全免费，不用注册也没有使用次数限制，全部计算都在你的浏览器里完成。
我输入的颜色会被上传吗
不会。转换只是在你设备上运行的普通JavaScript代码，不会发送到任何服务器，页面加载完成后即使断网也能继续使用。
HSL是什么
HSL指的是色相（Hue）、饱和度（Saturation）和明度（Lightness）。色相是色轮上0到360度之间的角度，饱和度是0%到100%之间颜色的鲜艳程度，明度则从0%（黑色）经过50%的纯色一直到100%（白色）。
怎么手动把hex转换成HSL
先把hex拆成红、绿、蓝三个数值，各自除以255。取这三个数里的最大值和最小值，明度是它们的平均值，饱和度等于(最大值-最小值)除以(1-|2L-1|)，色相则由哪个通道是最大值决定，再换算到0到360度的范围里。
支持#36c这种3位简写吗
支持。CSS的简写规则是每一位数字都重复一次，所以#36c会展开成#3366cc，再转换成hsl(220, 60%, 50%)。4位简写也是一样的规则，最后一位对应透明度。
透明度（HSLA）是怎么处理的
8位的hex代码最后两位就是透明度。这个数值（0到255）除以255，就能得到hsla()需要的0到1之间的alpha值，并保留三位小数，所以#3366cc80会变成hsla(220, 60%, 50%, 0.502)。
能把HSL转换回HEX吗
可以。用结果下方的HSL转HEX那一行，输入色相（0到360）以及饱和度和明度（0%到100%），马上就能得到对应的十六进制代码，超出范围的数值会自动被限制在合理区间内。
为什么HSL比hex更方便
HSL更符合人的理解习惯，提高L就能让颜色变亮，降低S就能让颜色变柔和，改变H就能换成完全不同的色系，不用去猜十六进制数字该怎么改。这也是它很适合用来搭建统一配色方案、hover状态和设计变量的原因。