HSL 转 HEX Hue Saturation Lightness ↔ Hexadecimal 免费 在线 安全
用 HSL 写一个值，右边立刻就是 HEX。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
这些写法从哪里来
十六进制和 RGB 是同一件事写了两遍。屏幕上的颜色是三个数——要发出多少红光、绿光和蓝光——每个从0到255，也就是一个字节；十六进制不过是把这些字节按十六进位写出来，所以 #FF8800 和 rgb(255, 136, 0) 是给同一个像素下的同一道命令。HSL 之所以被发明，是因为那两种写法人都读不懂：它把色相写成色轮上的角度，把饱和度与明度写成百分比，于是设计者不必重算三个数就能把一个颜色调亮。CMYK 属于另一个世界——墨，而不是光。它是减色的，由四块印版搭成，并且够不到屏幕能给出的每一种颜色，因为屏幕发光，而纸只是把光反射回来。
你会在哪里遇到它们
十六进制是你敲进样式表里的东西，也是设计工具递给你的东西。RGB 出现在任何需要对颜色做算术的地方：渐变、透明度、算出某个色调的代码。HSL 是手动调整配色时伸手去拿的那一种，因为你想要的改动，往往就是它三个数里某一个的改动。CMYK 是印刷厂要的东西，而换算到它的那一刻，正是一份设计不再是光、而成为墨的那一刻。
常见问题
为什么我的 CMYK 结果和印刷厂给的不一样？
因为并不存在唯一正确的换算。本页的算法是简单的、与设备无关的那一种；当你需要一个起点或一个大致的对应值时，它就是正确答案。印刷厂是通过一份色彩特性文件来换算的，那份文件把具体的油墨、纸张与印刷机都算了进去；同一个 RGB 颜色，在光面铜版纸上和在胶版纸上会得出不同的 CMYK 值。凡是必须对上的东西，请向印刷厂索取他们的特性文件，而不要相信一条公式。
为什么有些屏幕上的颜色印不出来？
因为两者能够到的颜色并不相同。屏幕靠叠加光线成色，能给出油墨根本比不上的鲜艳饱和的青或绿；纸靠吸收光线成色，它最亮也不过是纸页本身的白。各自能够到的颜色范围叫作色域，在两者不重叠的地方，换算只能挑一个手上最接近的颜色。这就是屏幕上明亮的颜色印出来往往略显发闷的原因。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 HSL 转换成 HEX
您在 HSL 里确定了一种颜色,因为那是您能够思考的记法:色相 30,饱和度 29%,明度 28%,一种柔和的棕色,以及用于悬停状态的 34% 的较浅版本。现在这个颜色必须去往一个需要十六进制代码的地方:设计令牌文件、品牌手册、不理解 hsl() 的工具、电子邮件模板、发给同事的消息。把 HSL 转换成 HEX,就是把您推理出来的颜色用简短、无歧义并且被一切所理解的形式写下来。
这个转换的方向与设计师最先遇到的相反。它从三个对人友好的数字出发,到达三个字节。每一步都是直白的算术,但涉及几种类似三角函数的情形和舍入,这就是人们更愿意让别人代劳的原因。本页在您的浏览器中完成,不会上传任何内容。下面您会看到三个数字如何变成六位十六进制数字,转换保留什么,为什么一个经过 HSL 的颜色可能落在离起点一两步的地方,设计师使用这个转换的方式,以及要避免的陷阱。
转换如何工作
从色相、饱和度和明度到红、绿、蓝
换算器首先算出色度,即颜色离灰色有多远:它随饱和度增长,随明度离开 50% 而缩小。然后它把色相放进色轮的六个扇区之一,每个宽 60 度,并根据扇区判定三个通道中哪个处于最大值、哪个处于最小值、哪个居中。最后它加上一个常数使明度正确,把三个值从 0 到 1 的范围放大到 0 到 255,并各自舍入为整数。这三个字节以十六进制书写,每个两位。
一个带数字的例子
取 hsl(30, 29%, 28%)。色度是 (1 − |2 × 0.28 − 1|) × 0.29 = 0.56 × 0.29 = 0.1624。30 度的色相正好在第一个扇区的一半处,所以中间通道是色度的一半,0.0812。要加的常数是 0.28 − 0.0812 = 0.1988。所以红是 0.1624 + 0.1988 = 0.3612,绿是 0.0812 + 0.1988 = 0.28,蓝是 0.1988。乘以 255 并舍入,它们是 92、71 和 51。以十六进制就是 #5C4733。
灰色
当饱和度为 0% 时,不管色相如何颜色都是灰色,三个字节相等。hsl(0, 0%, 50%) 是 #808080。色相被忽略,所以任何色相数字都给出同样的灰色。
转换保留什么、无法保留什么
它保留您所描述的颜色
结果是您给出的色相、饱和度和明度所对应的颜色,以字节书写。您键入的三个数字是眼睛归类的颜色:色轮上的一个色相、它有多饱和、有多亮。这就是 HSL 值得拥有的原因,而转换忠实地把您的选择带到十六进制。
它不能保证换回时得到同样的数字
二者描述相同的颜色,但 HSL 通过不同的几何达到它们,它的三个数字在写下时被舍入为整数度和整数百分比。所以一个换到 HSL 再换回来的颜色可能落在离起点一两步的地方:视觉上相同,但并非字节对字节相同。在我们的例子中,#5A4632 的 HSL 约为 hsl(30, 29%, 28%);把这些舍入后的数字换回去得到 #5C4733,在红色上差了两步。如果您需要精确的字节,请保留十六进制。
百分号和度数符号
页面把色相读作度数,把饱和度和明度读作百分比。您可以带或不带符号书写它们。大于 360 或小于 0 的色相会绕着色轮回绕,所以 390 与 30 相同。
实际用途
编写设计令牌文件
设计系统把颜色存为令牌。许多团队用 HSL 创建颜色,因为他们能对其推理,又用十六进制发布,因为每个工具都能读取。对每个令牌把 HSL 转换成 HEX 一次,发布的文件就是人人可用的东西。
为不读取 hsl() 的工具生成颜色
电子邮件客户端、一些文档编辑器、较老的图形程序和许多图表库只接受十六进制。您在 HSL 里确定的一切,必须经过转换才能被它们使用。
检查生成的调色板
通过旋转色相生成调色板的脚本给出一份 hsl() 值的清单。要把它们看成您会放进样式表或交给设计师的代码,请把每一个转换成十六进制。这也让您发现舍入到同一代码、因此其实并不不同的值。
在消息中分享颜色
十六进制代码简短、可复制,几乎每个与颜色打交道的人都能理解。hsl() 值更长,在设计圈之外也不那么熟悉。当您把颜色发给某人时,十六进制是礼貌的形式。
如何在这里把 HSL 转换成 HEX
输入或粘贴 hsl 值
在第一个字段中以 hsl(30, 29%, 28%) 的形式输入颜色,或只输入三个数字。色相以度计,饱和度和明度以百分比计。
读取十六进制代码
答案立刻出现,如 hsl(30, 29%, 28%) = #5C4733。它用大写字母和井号书写。
把它复制到您的工作中
在您的样式表、令牌文件或消息中使用该代码。对于相反方向,HEX 转 HSL只需一次点击。
这些记法从哪里来
十六进制和 RGB 是同一件事写了两遍
屏幕颜色是三个数字,表示发出多少红、绿、蓝光,每个从 0 到 255,恰好是一个字节。十六进制只是把这些字节写成十六进制。要看到这些数字,请把 HEX 转换成 RGB。
HSL 与 CMYK
HSL 的发明是因为两者对人来说都不易读:它把色相表示为色轮上的一个角度,饱和度和明度为百分比,这样设计师可以让某个东西更亮,而不必重新计算三个数字。CMYK 完全属于另一个世界,是油墨而不是光。它是减色的,由四块印版构成,并且无法达到屏幕能显示的每一种颜色,因为屏幕发光而纸只是反射光。
把 HSL 转换成 HEX 时的陷阱
期待换回原来的代码
如果您从一个十六进制代码出发,把它转换成 HSL,什么都没调整就换回来,可能得到一个差一两步的不同代码。对单个颜色来说这看不出来。对于设计系统,请决定哪种形式是母版,并把另一种当作派生的。
弄混饱和度和明度
这两个很容易被错误地对调:hsl(30, 28%, 29%) 不是 hsl(30, 29%, 28%)。顺序是色相、饱和度、明度。如果屏幕上的颜色看起来不像您预期的,请检查是否把它们弄反了。
忘了明度不是亮度
两个明度相同的颜色在亮度上看起来可能不同。50% 明度的黄色看起来比 50% 的蓝色亮得多。如果您在为文字和背景选颜色,请用专门的工具检查它们的对比度,而不是比较明度数字。
使用超出范围的值
饱和度和明度限于 0 到 100 百分比。超出该范围的值会被截断。120% 的明度并不比白色更亮;它就是白色。
人们在转换之前问的问题
十六进制中的 hsl(0, 100%, 50%) 是什么?
#FF0000,纯红。
十六进制中的 hsl(0, 0%, 100%) 是什么?
#FFFFFF,白色。
我可以使用小数吗?
可以。hsl(30.5, 28.6%, 27.8%) 是被接受的。结果被舍入为整字节。
转换是精确的吗?
它对您键入的数字给出精确的字节,舍入为整数值。换回去可能差一步,因为 HSL 的数字是舍入过的。
我的颜色会被上传吗?
不会。算术在您的浏览器中运行,不会向任何地方发送任何内容。
如何换回去?
把 HSL 转换成 HEX 时明智的选择
决定哪种形式是母版
如果您在 HSL 中设计,请把 HSL 值保留为来源,并把十六进制作为输出发布。如果品牌给了您十六进制,就保留它,只把 HSL 用于变体。把二者当作同等来源混用,正是产生漂移的原因。
用 HSL 做变化,用十六进制做固定
当您需要一族色调时,在 HSL 中工作。当您需要固定一种颜色使它在每个工具里都相同时,把它写成十六进制。
保留您键入的数字
把 HSL 值记在调色板笔记里十六进制的旁边。如果日后有人想要较浅的版本,他们可以从您的数字出发,而不是从已经被舍入过的代码出发。
色轮的六个扇区
哪个通道高,哪个通道低
转换把色轮分成 60 度的六个扇区,在每个扇区中,一个通道处于最大,一个处于最小,第三个平滑变化。从 0 到 60,红最大,蓝最小,绿上升:红变成黄。从 60 到 120,绿最大,红下降:黄变成绿。从 120 到 180,绿保持高位,蓝上升:绿变成青。从 180 到 240,蓝接手,绿下降。从 240 到 300,蓝保持高位,红上升:蓝变成品红。从 300 到 360,红再次接手,蓝下降。当您把 HSL 转换成 HEX 时,知道您的色相在哪个扇区有帮助,因为它告诉您答案中的三对数字里哪一对会最大。
为什么答案有家族相似性
色相和饱和度相同而明度不同的颜色给出看起来像亲戚的十六进制代码:哪一对高、哪一对低的模式相同,只是整体放大或缩小。#5C4733、#7A5F44 和 #A38461 都属于同一家族,红最大,然后是绿,然后是蓝。您可以学会一眼读懂这个,这使错误更容易被发现。
构建明度渐变
一个色相,九个台阶
这个转换一个非常实用的用途,是构建单一颜色从非常浅到非常深的渐变,即设计系统标为 50、100、200,依此类推直到 900 的那种刻度。选一个色相和一个饱和度,让明度逐步经过 96、90、80、70、60、50、40、30 和 20 百分比这样的值。对每一步把 HSL 转换成 HEX,您就得到九个属于一起的代码。在最浅和最深的台阶处把饱和度稍微降低几个点,常常看起来比保持恒定更自然。
给台阶命名
给每个台阶起一个记录其角色而非数值的名称:最浅的叫 surface,下一个叫 border,最深的叫 text。在代码中,名称告诉下一个读者这个颜色是做什么用的,而且您可以更改它背后的数字而无需触碰使用它的规则。
浅色和深色主题
镜像渐变
深色主题常常是把渐变翻过来的浅色主题:浅色主题中最浅的台阶成为页面背景,深色主题中最深的成为背景。如果您在 HSL 中构建了渐变,深色主题除了第二组转换之外不花您任何东西。保持色相固定,这保留了品牌的特性,并稍微调整饱和度,因为饱和的颜色在深色背景上往往显得刺眼。
检查两种主题
测试两种主题中每一对文字与背景的对比度。在白色上有效的颜色在近黑色上可能失败,用对比度工具和您刚生成的十六进制代码检查只需一分钟。
当您对颜色只有一个粗略的想法时
从色轮开始,然后细化
有时您根本没有十六进制代码,只有一个想法:平静的蓝、温暖的橙、清新的绿。HSL 是个好的起点,因为您可以从色轮的地标中选一个色相,设定适中的饱和度和居中的明度,然后把 HSL 转换成 HEX 看看得到什么。如果看起来太刺眼,降低饱和度;如果看起来平淡,移动明度。每次尝试只花几秒钟,最后您得到一个可以直接放进样式表的十六进制代码。
相关转换器
同一系列的工具涵盖相邻的转换。要换回去,请用HEX 转 HSL。对于代码背后的数字,有HEX 转 RGB和RGB 转 HEX,对于印刷,有HEX 转 CMYK和CMYK 转 HEX。对于同一样式表中的尺寸,px 转 rem为长度所做的,就是本页为颜色所做的。
一个实例
假设您为一个应用的成功状态选了一种绿色:hsl(145, 55%, 38%)。您输入它并读到 #2C9658。您在令牌文件中把这个代码用作 --success。对于成功提示的背景,您取同一色相 hsl(145, 45%, 94%),读到 #E9F7EF。对于边框,hsl(145, 45%, 78%),读作 #AEE0C3。三个代码,一个色相,一分钟内全部推出,每一个都是团队里任何工具都能打开的普通十六进制代码。
一份简短的清单
转换之前
检查三个数字的顺序:色相、饱和度、明度。决定哪种形式是您的母版。
转换时
输入数值,读取十六进制,并连同井号一起复制。
转换之后
在上下文中查看屏幕上的颜色,并把 HSL 值记在代码旁边以备日后使用。
常见错误
对调饱和度和明度
顺序是色相、饱和度、明度。
期待恢复旧的十六进制
它可能差一步。如果重要,请保留原件。
比较明度而不是对比度
对文字和背景使用对比度工具。
您的颜色留在您的设备上
计算在本地进行。您的数值由您自己的浏览器使用,不会向任何地方发送任何内容。事后没有什么需要删除,也没有账户要创建。这就是把 HSL 转换成 HEX 的朴素方式。
小结
要在这里把 HSL 转换成 HEX,输入以度计的色相和以百分比计的饱和度和明度,立刻读取十六进制代码。转换保留眼睛归类的颜色:色轮上的一个色相、它有多饱和、有多亮。两种记法描述相同的颜色,但 HSL 通过不同的几何达到它们,它的三个数字被舍入为整数度和整数百分比,所以一个换到 HSL 再换回来的颜色可能落在离起点一两步的地方。如果您需要精确的字节,请保留十六进制。不会上传任何内容。