RGB 转 HEX Red Green Blue ↔ Hexadecimal 免费 在线 安全
用 RGB 写一个值，右边立刻就是 HEX。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
这些写法从哪里来
十六进制和 RGB 是同一件事写了两遍。屏幕上的颜色是三个数——要发出多少红光、绿光和蓝光——每个从0到255，也就是一个字节；十六进制不过是把这些字节按十六进位写出来，所以 #FF8800 和 rgb(255, 136, 0) 是给同一个像素下的同一道命令。HSL 之所以被发明，是因为那两种写法人都读不懂：它把色相写成色轮上的角度，把饱和度与明度写成百分比，于是设计者不必重算三个数就能把一个颜色调亮。CMYK 属于另一个世界——墨，而不是光。它是减色的，由四块印版搭成，并且够不到屏幕能给出的每一种颜色，因为屏幕发光，而纸只是把光反射回来。
你会在哪里遇到它们
十六进制是你敲进样式表里的东西，也是设计工具递给你的东西。RGB 出现在任何需要对颜色做算术的地方：渐变、透明度、算出某个色调的代码。HSL 是手动调整配色时伸手去拿的那一种，因为你想要的改动，往往就是它三个数里某一个的改动。CMYK 是印刷厂要的东西，而换算到它的那一刻，正是一份设计不再是光、而成为墨的那一刻。
常见问题
为什么我的 CMYK 结果和印刷厂给的不一样？
因为并不存在唯一正确的换算。本页的算法是简单的、与设备无关的那一种；当你需要一个起点或一个大致的对应值时，它就是正确答案。印刷厂是通过一份色彩特性文件来换算的，那份文件把具体的油墨、纸张与印刷机都算了进去；同一个 RGB 颜色，在光面铜版纸上和在胶版纸上会得出不同的 CMYK 值。凡是必须对上的东西，请向印刷厂索取他们的特性文件，而不要相信一条公式。
为什么有些屏幕上的颜色印不出来？
因为两者能够到的颜色并不相同。屏幕靠叠加光线成色，能给出油墨根本比不上的鲜艳饱和的青或绿；纸靠吸收光线成色，它最亮也不过是纸页本身的白。各自能够到的颜色范围叫作色域，在两者不重叠的地方，换算只能挑一个手上最接近的颜色。这就是屏幕上明亮的颜色印出来往往略显发闷的原因。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 RGB 换算成 HEX
图像编辑器、操作系统中的取色器或一行代码,给您的颜色是三个数:90、70、50。样式表、设计令牌文件或发给同事的消息,想要的是一个简短的代码:#5A4632。两者之间的一步,就是本页所做的。把 RGB 换算成 HEX,就是把同样的三个数写成十六进制,每个两位,并在前面加一个井号。对一种颜色来说这很容易,对二十种则很乏味,而且当某个数需要前导零或某一位是字母时,很容易出错。
这个换算是精确的,而并非每种颜色换算都如此。十六进制和 rgb() 是同样三个数的两种拼写,即屏幕应当发出的红、绿、蓝光的量,每个从 0 到 255。没有任何东西是近似的,往返一趟会回到起点。页面在您的浏览器中完成,不会上传任何内容。下面您会找到每个数如何变成两位十六进制数字、透明度如何带过去、sRGB 的局限、人们需要把 RGB 换算成 HEX 的场合,以及几个让项目中颜色保持一致的习惯。
换算如何运作
每个数变成两位十六进制数字
取 rgb(90, 70, 50)。把每个数除以十六:90 是 5 乘 16 加 10,而 10 是数字 A,所以 90 变成 5A。70 是 4 乘 16 加 6,所以是 46。50 是 3 乘 16 加 2,所以是 32。把三对放在一起并加上井号:#5A4632。页面在您输入时为您完成这些,并显示 rgb(90, 70, 50) = #5A4632 这句话,让您核实。
前导零
每一对必须有两位数字。小于 16 的数前面需要一个零:7 变成 07,0 变成 00。所以 rgb(0, 7, 255) 是 #0007FF,而不是 #07FF,后者的含义大不相同。忘了零是手工换算时最常见的错误。
范围
每个数必须在 0 到 255 之间。大于 255 的值无法用两位十六进制数字写出,负值没有意义。如果您代码中的计算产生了 270 或 −5,请先把它限制在范围之内。换算器也这样做,所以它从不产生无效的代码。
换算保留什么、不能保留什么
它精确地保留颜色
十六进制和 rgb() 是同样三个数的两种拼写,红、绿、蓝各为 0 到 255,所以没有任何东西是近似的,往返一趟会回到起点。把 RGB 换算成 HEX 再换回来,您就得到开始时的数。
它把透明度带过去
表示透明度的第四个值也被带过去:#RRGGBBAA 变成 rgba(),再变回来。0.5 的透明度变成一对 80,因为 255 的一半约为 128,即十六进制的 80。所以 rgba(90, 70, 50, 0.5) 是 #5A463280。所有当前的浏览器都接受八位十六进制。
它无法描述 sRGB 之外的颜色
两种拼写描述的都是 sRGB,即屏幕使用了三十年的色彩空间。它们无法描述其外的颜色,而较新的 CSS 记法 lab()、oklch() 和 color() 正是为此而存在。如果您从宽色域工具中的颜色出发,您复制的三个数已经是 sRGB 版本,而十六进制忠实于这些数。
它不保留简写
凡是可以用三位数字书写的代码,比如把 #AABBCC 写成 #ABC,换算器给出长格式。长格式始终有效且是同一种颜色;简写只是为读者方便。
常见颜色及其代码
几个要记住的
rgb(255, 255, 255) 是 #FFFFFF,白:三种光全功率。rgb(0, 0, 0) 是 #000000,黑:完全没有光。rgb(255, 0, 0) 是 #FF0000,纯红;rgb(0, 255, 0) 是 #00FF00,rgb(0, 0, 255) 是 #0000FF。任何三个数相等的颜色都是灰色,它的代码有三对相等的数:rgb(128, 128, 128) 是 #808080。
网页安全色的习惯
旧的指南谈论网页安全色,它们的每一对只能是 00、33、66、99、CC 或 FF。它们属于 256 色屏幕的年代,没有理由继续存在。用您喜欢的任何值;屏幕可以全部显示。
如何在这里把 RGB 换算成 HEX
输入三个数
在第一个输入框中以 rgb(90, 70, 50) 的形式输入颜色,或让数字以逗号或空格分隔。不需要百分比;请使用 0 到 255 的数字。
读出十六进制代码
答案立刻出现在另一个输入框中,以井号开头,用大写字母。如果您给了表示透明度的第四个值,代码有八位数字。
把它复制到您的工作中
把代码粘贴到样式表、令牌文件或消息中。把它加到您的调色板笔记中,这样下一次换算就是一次查找。
这些记法从哪里来
十六进制和 RGB 是同一件事写了两遍
屏幕颜色是三个数,发出多少红、绿、蓝光,每个从 0 到 255,即一个字节。十六进制只是用十六进制写下这些字节,所以 #FF8800 和 rgb(255, 136, 0) 是对同一个像素的同一条指令。
HSL 和 CMYK
HSL 的发明,是因为前两者人都读不懂:它把色相给为色轮上的一个角度,饱和度和明度为百分比,所以设计师可以让某物更亮而无需重新计算三个数。CMYK 则完全属于另一个世界,是墨而不是光。它是减色的,由四个印刷版构成,并且不能达到屏幕所能显示的每一种颜色,因为屏幕发光,而纸张只反射光。请见HEX 转 HSL和RGB 转 CMYK。
您在哪里遇到它们
在设计交接中
设计师在显示 rgb 值的编辑器或取色器中工作;开发者的样式表需要十六进制。把 RGB 换算成 HEX 是中间的一步,调色板中的每种颜色都要做一次。
在计算颜色的脚本中
混合两种颜色或加深一种颜色的脚本,用数字工作,最后得到三个数。要在样式表中使用或显示结果,必须把它写成十六进制代码。在代码中手工完成只需几行;用换算器核对结果更快。
在数据可视化中
图表库接受十六进制字符串形式的颜色。由数值方法生成的调色板出来是 rgb 三元组。一个换算步骤把一个变成另一个。
在文档和演示文稿中
办公程序把颜色显示为 RGB 数字;网页编辑器需要十六进制。当品牌色必须出现在两者中时,换算让它们保持一致。
把 RGB 换算成 HEX 时的陷阱
忘了前导零
把 7 写成 7 而不是 07 会使后面每一位都移位。每对始终用两位数字。
混淆百分比与 0 到 255
rgb(35%, 27%, 20%) 是这些数的另一种拼写,100 百分比对应 255。如果您的来源使用百分比,请先把它们换算成 0 到 255:乘以 2.55。
计算所得颜色的取整误差
产生 127.5 的脚本必须决定它是 127 还是 128。差别是看不见的,但它为您以为是一种的颜色产生了两个代码。到处用同样的方式取整。
从截图中取颜色
从截图中读出的颜色,经过了屏幕的色彩管理,也许还有压缩。它可能与来源相差一两级。能用设计文件时请用设计文件。
人们在换算之前问的问题
rgb(255, 0, 0) 的十六进制是什么?
#FF0000,纯红。
rgb(0, 0, 0) 的十六进制是什么?
#000000,黑。
十六进制代码可以用小写吗?
可以。#5a4632 和 #5A4632 是同一种颜色。页面写大写。
换算是精确的吗?
是的。它是同样三个数的两种拼写。
我的颜色会被上传吗?
不会。算术在您的浏览器中运行,没有任何东西被发送到任何地方。
我怎样换回去?
用HEX 转 RGB,它把三对读作数字。
让项目中的颜色保持一致的习惯
每种颜色只定义一次
把您的调色板放进自定义属性,比如 --brand: #5A4632,并按名称引用颜色。当您为新颜色把 RGB 换算成 HEX 时,您只添加一行,每一处使用都随之更新。
选定一种大小写
为十六进制代码选定大写或小写并坚持它。这样在代码中搜索颜色就可靠了。
记录来源
在每种颜色旁边,注明它来自哪里:品牌指南、标志、取样的图像。当出现某个颜色是否正确的问题时,您知道去哪里核对。
测试对比度
对于有色背景上的文字,请用工具检查对比度。rgb 形式的数字直接输入公式,而十六进制形式是您在大多数检查器中输入的。
为什么是 256 级,数字背后是什么
每种光八位
这三个数中的每一个存储在八位中,允许从 0 到 255 的 256 个值。三个一起给出 256 × 256 × 256,约 16.7 百万种组合,在大多数条件下超过眼睛所能分辨的。这就是十六进制代码恰好是六位长的原因:每种光两位,不多也不少。当您把 RGB 换算成 HEX 时,您是在以人们所能商定的最紧凑的形式写出三个字节。
为什么相等的级差看起来不相等
这些数与到达您眼睛的光不成比例。屏幕应用一条曲线,接近 2.2 次幂,使暗调得到 256 级中更多的级数,而不是亮调,这适合眼睛。从 10 到 20 的一级,看起来是比从 240 到 250 的一级更大的变化。对您来说,这意味着把两种颜色的数取平均,并不给出您混合光时所见的颜色,这在您用代码计算渐变和混合时很要紧。
灰色与对角线
所有的灰色都位于三个数相等的那条线上。有 256 个,从 0 处的黑到 255 处的白。如果您把 RGB 换算成 HEX 而三对相同,您立刻知道这个颜色没有色相。三对相差一两级的近灰色有淡淡的色调,设计师常用它给中性色一点暖或冷的意味。
建立与检查调色板
从少数挑选的颜色到调色板
典型的调色板有一个主色、一个强调色、一个文字用的中性色、一个表面用的较浅中性色,以及一两个表示成功和错误的信号色。在您的设计工具中挑选每一个,读出它的 rgb 数字,并为样式表把 RGB 换算成 HEX。把它们写成自定义属性,取描述角色的名称,调色板就可以用于每个组件了。
文字与背景的对比度
可读的文字需要字母与背景之间有足够的亮度差。无障碍指南定义了一个由两种颜色的红、绿、蓝值计算的对比度,并要求普通文字至少为 4.5 比 1。检查器接受十六进制代码,所以您在这里产生的代码可以直接放进去。检查您打算使用的每一个搭配,而不只是白底上的主色。
换算一份清单
当您有许多颜色要换算时,一次处理一个,并把每个结果连同其名称和用途粘贴到一张表里。每种颜色花一分钟,这张表就成为整个项目的参考。如果某个颜色以后被调整,只需更改它那一行。
让十六进制和 rgb 保持同步
如果您的项目把一些颜色存为十六进制,另一些存为 rgb,当有人编辑了其中一个而忘了另一个时,它们很容易漂移。选一个作为母本,通常是十六进制,并在需要时用换算器推出另一个。
相关换算器
同一系列的工具涵盖相邻的换算。要换回去,请使用HEX 转 RGB。对于以色相描述的颜色,HEX 转 HSL和HSL 转 HEX就在手边,对于印刷,有RGB 转 CMYK、CMYK 转 RGB和CMYK 转 HEX。对于同一样式表中的尺寸,px 转 rem对长度所做的,就是本页对颜色所做的。
一个演算示例
假设图像编辑器中的取色器告诉您,一张照片的强调色是 rgb(214, 98, 56)。您输入这三个数并读到 #D66238。在样式表中您写 --accent: #D66238 并把它用于按钮和链接。一位同事问品牌指南里这个颜色是什么,您发给他代码。后来您需要一个半透明版本用于横幅,您用 HEX 转 RGB 把它换回去,构建出 rgba(214, 98, 56, 0.15)。两次换算都是精确的,所以横幅与按钮是同一个色相。
一份简短的清单
换算之前
检查每个数都在 0 到 255 之间。决定是否需要透明度。
换算之时
输入三个数,读出代码,并连同井号一起复制。
换算之后
在上下文中、在真实的背景上测试这个颜色,并检查位于其上的任何文字的对比度。
常见错误
丢了前导零
每一对有两位数字。7 是 07。
写出大于 255 的数
它们无法用两位数字写出。请先限制它们。
把屏幕当作真相
数字是精确的。外观取决于显示器。
您的颜色留在您的设备上
计算在本地进行。您的值由您自己的浏览器使用,没有任何东西被发送到任何地方。事后没有什么需要删除,也没有账户需要创建。这就是把 RGB 换算成 HEX 的朴素方式。
总结
要在这里把 RGB 换算成 HEX,输入三个数并立刻读出十六进制代码。换算精确地保留颜色:十六进制和 rgb() 是同样三个数的两种拼写,红、绿、蓝各为 0 到 255,所以没有任何东西是近似的,往返一趟会回到起点。表示透明度的第四个值也被带过去,因为 rgba() 变成 #RRGGBBAA,再变回来。两种拼写描述的都是 sRGB,所以无法描述其外的颜色。每一对有两位数字,所以小于 16 的数会得到前导零。不上传任何内容。