HEX 转 HSL Hexadecimal ↔ Hue Saturation Lightness 免费 在线 安全
用 HEX 写一个值，右边立刻就是 HSL。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
这些写法从哪里来
十六进制和 RGB 是同一件事写了两遍。屏幕上的颜色是三个数——要发出多少红光、绿光和蓝光——每个从0到255，也就是一个字节；十六进制不过是把这些字节按十六进位写出来，所以 #FF8800 和 rgb(255, 136, 0) 是给同一个像素下的同一道命令。HSL 之所以被发明，是因为那两种写法人都读不懂：它把色相写成色轮上的角度，把饱和度与明度写成百分比，于是设计者不必重算三个数就能把一个颜色调亮。CMYK 属于另一个世界——墨，而不是光。它是减色的，由四块印版搭成，并且够不到屏幕能给出的每一种颜色，因为屏幕发光，而纸只是把光反射回来。
你会在哪里遇到它们
十六进制是你敲进样式表里的东西，也是设计工具递给你的东西。RGB 出现在任何需要对颜色做算术的地方：渐变、透明度、算出某个色调的代码。HSL 是手动调整配色时伸手去拿的那一种，因为你想要的改动，往往就是它三个数里某一个的改动。CMYK 是印刷厂要的东西，而换算到它的那一刻，正是一份设计不再是光、而成为墨的那一刻。
常见问题
为什么我的 CMYK 结果和印刷厂给的不一样？
因为并不存在唯一正确的换算。本页的算法是简单的、与设备无关的那一种；当你需要一个起点或一个大致的对应值时，它就是正确答案。印刷厂是通过一份色彩特性文件来换算的，那份文件把具体的油墨、纸张与印刷机都算了进去；同一个 RGB 颜色，在光面铜版纸上和在胶版纸上会得出不同的 CMYK 值。凡是必须对上的东西，请向印刷厂索取他们的特性文件，而不要相信一条公式。
为什么有些屏幕上的颜色印不出来？
因为两者能够到的颜色并不相同。屏幕靠叠加光线成色，能给出油墨根本比不上的鲜艳饱和的青或绿；纸靠吸收光线成色，它最亮也不过是纸页本身的白。各自能够到的颜色范围叫作色域，在两者不重叠的地方，换算只能挑一个手上最接近的颜色。这就是屏幕上明亮的颜色印出来往往略显发闷的原因。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 HEX 转换成 HSL
像 #5A4632 这样的十六进制代码是存储颜色的好办法,却是思考颜色的差办法。数字里没有任何东西告诉您这个颜色是棕色、它有多亮,或者稍浅一点的版本会是什么样。HSL 就是为了解决这个问题而发明的。它按人们谈论颜色的方式描述颜色:它是什么色相、有多鲜艳、有多亮。把 HEX 转换成 HSL,就是把颜色从设计工具递给您的形式翻译成您可以推理的形式:hsl(30, 29%, 28%) 是一种深而柔和的橙棕色,而且您马上能看出,调高最后一个数字会让它变浅。
这就是设计师和前端开发者使用这个转换的真正原因。他们有一个十六进制的品牌色,需要一族相关的颜色:悬停状态用较浅的,按下的按钮用较深的,背景色调用非常浅的,禁用控件用去饱和的。在十六进制里,每一个都是对三对数字的新一轮搜寻。在 HSL 里,每一个只是改一个数字。颜色还是那个颜色,只是通过一个更有用的镜片来看。
本页在您的浏览器中转换,不会上传任何内容。下面您会看到 HSL 的三个数字如何从十六进制数字算出,转换保留什么、在哪里舍入,色相、饱和度和明度在实践中意味着什么,设计师如何用 HSL 构建调色板和状态,以及第一次把 HEX 转换成 HSL 的人会踩的陷阱。
HSL 描述什么
色相:色轮上的位置
色相是绕色轮从 0 到 360 度的角度。红在 0,黄在 60,绿在 120,青在 180,蓝在 240,品红在 300;到 360 您就回到了红。色相 30 在红与黄之间,那是橙色。这个数字说明您处在哪个颜色族,而对它有多亮或多浅只字未提。
饱和度:有多鲜艳
饱和度是一个百分比。在 100% 时颜色与色相所允许的一样纯;在 0% 时它失去了所有颜色,成为灰色。29% 的饱和度,如我们例子中的棕色,是一种柔和、泥土般的颜色。降低饱和度是让一个喧闹的颜色平静下来而不改变其性格的最快办法。
明度:有多浅或多深
明度也是一个百分比。在 0% 时不管色相和饱和度如何,颜色都是黑色;在 100% 时是白色;在 50% 时是完整的、正常的颜色。我们的棕色在 28%,偏暗。调高这个数字得到同一颜色的较浅版本,调低则得到较深的版本,这正是设计师最常想要的改变。
为什么比十六进制容易
在十六进制里,让颜色变浅意味着把三对数字各增加不同的量以使色相不漂移,凭眼睛几乎不可能做到。在 HSL 里,它意味着改一个数字,其余两个不动。
转换如何工作
从三个字节到一个角度和两个百分比
换算器首先把十六进制数字读作红、绿、蓝的值,每个从 0 到 255,并把它们缩放到 0 与 1 之间。它找出三者中最大和最小的。明度是这两者的平均值。饱和度取决于它们相距多远,相对于明度而言。色相取决于哪个通道最大,以及另外两个如何比较。如果三者相等,颜色是灰色,饱和度为零,色相没有意义;这时换算器为它显示 0。
例子
对于 #5A4632,字节是 90、70 和 50。红最大,为 0.353,蓝最小,为 0.196。明度是它们之和的一半,0.275,约 28%。差值是 0.157,所以饱和度是 0.157 除以和 0.549,约 29%。红是最大的通道,绿居中,这把色相定在 30 度。结果是 hsl(30, 29%, 28%)。
整数
三个数字在写下时被舍入为整数度和整数百分比。这是人们使用的形式,也是 CSS 在日常工作中期望的形式,但这意味着在最后一位丢失了一些信息,下一节会解释。
转换保留什么、无法保留什么
它保留眼睛归类的颜色
结果是眼睛归类的颜色:色轮上的一个色相、它有多饱和、有多亮。这就是 HSL 值得拥有的原因。您可以通过改一个数字让颜色变浅或让一种色调变深,这在十六进制里几乎不可能。
它不能保证换回同样的字节
二者描述相同的颜色,但 HSL 通过不同的几何达到它们,它的三个数字在写下时被舍入为整数度和整数百分比。所以一个换到 HSL 再换回来的颜色可能落在离起点一两步的地方:视觉上相同,但并非字节对字节相同。如果您需要换回精确的字节,请保留十六进制。把 HEX 转换成 HSL 来处理颜色,并把十六进制作为母版保留。
灰色没有色相
当三个字节相等时,关于色相没有什么可说的。换算器给出色相 0 和饱和度 0%,单靠明度描述这个灰色。不要对那个 0 做任何解读。
HSL 的实际使用
构建一族色调
取基础色 hsl(30, 29%, 28%)。悬停用的较浅色调是 hsl(30, 29%, 34%)。背景用的非常浅的色调是 hsl(30, 29%, 94%)。按下状态用的较深色调是 hsl(30, 29%, 22%)。色相和饱和度保持不动,所以这些颜色显然属于一起。在十六进制里做同样的事需要多次尝试,看起来仍会略有偏差。
主题和深色模式
主题常常需要同一调色板的浅色和深色版本。用 HSL,您保持色相,调整明度和饱和度:浅色主题中提亮背景、加深文字,深色主题则相反。把色相定义为自定义属性并只改变明度,是一种常见而整洁的做法。
生成调色板
要找到与基础色相配的颜色,旋转色相。两侧各三十度得到相邻色,180 得到互补色,120 或 240 得到三角配色。固定饱和度和明度,改变色相,这些颜色就有统一的感觉。这是开始一个看起来不随意的调色板的快速办法。
无障碍对比度
明度是对比度的主要控制。如果文字在彩色背景上难以阅读,办法通常是增加两者之间明度的差别,而 HSL 让这成为在每一侧调整一个数字的事。
如何在这里把 HEX 转换成 HSL
输入或粘贴十六进制代码
在第一个字段中输入颜色,带不带井号都可以。接受三位和六位数字的形式,带透明度的八位形式也能读取。
读取 hsl 值
答案立刻出现,如 #5A4632 = hsl(30, 29%, 28%)。这三个数字是以度为单位的色相,以及以百分比表示的饱和度和明度。
把它复制到您的样式表
原样使用结果,放在像 color: hsl(30, 29%, 28%) 这样的规则中。要调整颜色,改最后一个数字。相反方向的工具是HSL 转 HEX。
这些记法从哪里来
十六进制和 RGB 是同一件事写了两遍
屏幕颜色是三个数字,表示发出多少红、绿、蓝光,每个从 0 到 255,恰好是一个字节。十六进制只是把这些字节写成十六进制。要看到这些数字,请把 HEX 转换成 RGB。
HSL 与 CMYK
HSL 的发明是因为两者对人来说都不易读:它把色相表示为色轮上的一个角度,饱和度和明度为百分比,这样设计师可以让某个东西更亮,而不必重新计算三个数字。CMYK 完全属于另一个世界,是油墨而不是光。它是减色的,由四块印版构成,并且无法达到屏幕能显示的每一种颜色,因为屏幕发光而纸只是反射光。
把 HEX 转换成 HSL 时的陷阱
期待完美的往返
由于舍入,转换回来可能给出一个与原来差一两步的代码。对单个颜色来说这看不出来。对于许多颜色被来回转换的设计系统,它可能累积。请把十六进制作为来源保留。
以为相同的明度意味着相同的亮度
两个 HSL 明度相同的颜色,在亮度上可能看起来很不同:50% 的黄色看起来远比 50% 的蓝色亮。HSL 明度是一个方便的数字,不是感知亮度的度量。对于对比度检查,请使用专门的对比度工具。
忘了百分号
在 CSS 中,hsl() 里的饱和度和明度带百分号,而色相是纯数字或带 deg 的数字。漏掉符号是经典的错误。
对灰色解读过多
灰色没有色相。如果换算器为它显示 0,并不意味着它偏红。
人们在转换之前问的问题
HSL 中的 #FF0000 是什么?
hsl(0, 100%, 50%),纯红。
HSL 中的 #FFFFFF 是什么?
hsl(0, 0%, 100%),白色。对白色来说色相没有意义,换算器显示 0。
HSL 到处都受支持吗?
所有当前的浏览器都理解 hsl() 和 hsla()。它进入 CSS 已有许多年了。
转换是精确的吗?
在描述同一种颜色的意义上它是精确的,但数字被舍入为整数度和百分比,所以换回去可能差一步。
我的颜色会被上传吗?
不会。算术在您的浏览器中运行,不会向任何地方发送任何内容。
如何换回去?
把 HEX 转换成 HSL 时明智的选择
用 HSL 工作,用十六进制存储
把母版调色板保存在十六进制中,那里它没有歧义,当您想创建变体时使用 HSL。往返会损失一点;母版不会。
考虑较新的色彩空间
CSS 现在提供 oklch() 和类似的记法,在其中相等的明度看起来确实相等。它们值得为新的设计系统学习。HSL 仍然是几乎每个人都理解、每个工具都支持的记法。
使用自定义属性
定义 --hue、--sat 和 --light,并用它们构建颜色:hsl(var(--hue) var(--sat) var(--light))。这样主题只需编辑几个数字就能改变。
自信地阅读和书写 HSL
一些要记住的地标
几个数字让 HSL 更易读。60 的倍数处的色相是纯色:0 红、60 黄、120 绿、180 青、240 蓝、300 品红。明度 50 配饱和度 100 给出任何色相最纯的版本,而明度 95 或以上是浅得可以作背景的色调。当您把 HEX 转换成 HSL 并看到靠近这些地标之一的色相时,可以一眼说出颜色族。
在颜色族之间移动
在色相上加 180 得到色轮上相对的颜色,即互补色,通常是最强的对比。加或减 30 得到舒服地挨着原色的邻居。设计师用这些步骤挑选与品牌色相配的强调色,而无需猜测。
记下转换后的数值
当您为调色板把 HEX 转换成 HSL 时,把结果写在一张表里,原始十六进制放在旁边。这张表显示颜色之间的关系,如果某个色相或明度与其他的不协调,这种异常立刻可见。它还给您的团队一个共同的参考。
在真实屏幕上测试
在校准过的显示器上看起来平衡的颜色,在阳光下的手机或廉价笔记本上可能看起来不同。请在至少两台设备上检查完成的调色板,如果浅色调在其中一台上消失,就稍微调整明度。
相关转换器
同一系列的工具涵盖相邻的转换。要换回去,请用HSL 转 HEX。对于代码背后的数字,有HEX 转 RGB和RGB 转 HEX,对于印刷,有HEX 转 CMYK和CMYK 转 HEX。对于同一样式表中的尺寸,px 转 rem和px 转 em为长度所做的,就是本页为颜色所做的。
一个实例
假设您的品牌色是 #1E7A5C。您把 HEX 转换成 HSL,读到 hsl(160, 61%, 30%)。悬停状态您写 hsl(160, 61%, 36%),稍浅一点。按下状态写 hsl(160, 61%, 24%)。提示框后面的非常浅的背景写 hsl(160, 40%, 95%)。禁用的按钮写 hsl(160, 12%, 60%),同样的色相,但去掉了大部分颜色。五种颜色,一个色相,一分钟写完,它们看起来都像是一家人。当品牌色改变时,您只需改一次色相数字。
一份简短的清单
转换之前
决定您想拿这个颜色做什么:做变体、做主题,还是只是读一读。
转换时
粘贴十六进制,读取 hsl,并记下三个数字。
转换之后
一次改一个数字来制作变体,并在真实的背景上查看它们。
常见错误
把舍入后的数字当作精确的
它们是整数。请把十六进制作为母版保留。
把明度等同于亮度
两个明度相同的颜色在看起来多亮上可能差别很大。
漏掉百分号
饱和度和明度在 CSS 中需要它们。
您的颜色留在您的设备上
计算在本地进行。您的数值由您自己的浏览器使用,不会向任何地方发送任何内容。事后没有什么需要删除,也没有账户要创建。这就是把 HEX 转换成 HSL 的朴素方式。
小结
要在这里把 HEX 转换成 HSL,输入或粘贴十六进制代码,立刻读取 hsl 值。转换保留眼睛归类的颜色:色轮上的一个色相、它有多饱和、有多亮。这就是 HSL 值得拥有的原因,因为您可以通过改一个数字让颜色变浅或让一种色调变深,这在十六进制里几乎不可能。二者描述相同的颜色,但 HSL 通过不同的几何达到它们,它的三个数字被舍入为整数度和整数百分比,所以一个换到 HSL 再换回来的颜色可能落在离起点一两步的地方。如果您需要换回精确的字节,请保留十六进制。不会上传任何内容。