HEX 转 RGB Hexadecimal ↔ Red Green Blue 免费 在线 安全
用 HEX 写一个值，右边立刻就是 RGB。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
这些写法从哪里来
十六进制和 RGB 是同一件事写了两遍。屏幕上的颜色是三个数——要发出多少红光、绿光和蓝光——每个从0到255，也就是一个字节；十六进制不过是把这些字节按十六进位写出来，所以 #FF8800 和 rgb(255, 136, 0) 是给同一个像素下的同一道命令。HSL 之所以被发明，是因为那两种写法人都读不懂：它把色相写成色轮上的角度，把饱和度与明度写成百分比，于是设计者不必重算三个数就能把一个颜色调亮。CMYK 属于另一个世界——墨，而不是光。它是减色的，由四块印版搭成，并且够不到屏幕能给出的每一种颜色，因为屏幕发光，而纸只是把光反射回来。
你会在哪里遇到它们
十六进制是你敲进样式表里的东西，也是设计工具递给你的东西。RGB 出现在任何需要对颜色做算术的地方：渐变、透明度、算出某个色调的代码。HSL 是手动调整配色时伸手去拿的那一种，因为你想要的改动，往往就是它三个数里某一个的改动。CMYK 是印刷厂要的东西，而换算到它的那一刻，正是一份设计不再是光、而成为墨的那一刻。
常见问题
为什么我的 CMYK 结果和印刷厂给的不一样？
因为并不存在唯一正确的换算。本页的算法是简单的、与设备无关的那一种；当你需要一个起点或一个大致的对应值时，它就是正确答案。印刷厂是通过一份色彩特性文件来换算的，那份文件把具体的油墨、纸张与印刷机都算了进去；同一个 RGB 颜色，在光面铜版纸上和在胶版纸上会得出不同的 CMYK 值。凡是必须对上的东西，请向印刷厂索取他们的特性文件，而不要相信一条公式。
为什么有些屏幕上的颜色印不出来？
因为两者能够到的颜色并不相同。屏幕靠叠加光线成色，能给出油墨根本比不上的鲜艳饱和的青或绿；纸靠吸收光线成色，它最亮也不过是纸页本身的白。各自能够到的颜色范围叫作色域，在两者不重叠的地方，换算只能挑一个手上最接近的颜色。这就是屏幕上明亮的颜色印出来往往略显发闷的原因。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 HEX 转换成 RGB
设计工具把颜色给您的形式是 #5A4632。样式表、画布脚本、图表库或图形程序则要求 rgb(90, 70, 50) 的形式。它们是同一种颜色,而从一种拼写到另一种拼写的工作总是出现:品牌指南列出十六进制代码,而您的代码需要数字来计算更浅的色调;客户从标志上发来一种颜色,而您得用透明度填写 rgba();某个库只接受三个独立的值。把 HEX 转换成 RGB 是一件小事,而可靠的换算器能让您免于在脑子里做十六进制算术并算错。
这个转换是精确的,并不是每种颜色转换都如此。十六进制和 rgb() 是同样三个数字的两种拼写,即屏幕应发出的红、绿、蓝光的量,每个从 0 到 255。没有任何东西被近似,往返会回到起点。本页在您的浏览器中完成,不会上传任何内容。下面您会看到十六进制数字如何映射到三个数字,透明度如何带过去,简写形式做了什么,sRGB 的局限,以及开发者和设计师需要把 HEX 转换成 RGB 的各种情形。
转换如何工作
三对数字变成三个数字
十六进制颜色是一个井号后跟六个十六进制数字,它们成对读取:第一对是红,第二对是绿,第三对是蓝。每一对是介于 00 和 FF 之间的十六进制数,在您每天使用的十进制中是 0 到 255。所以 #5A4632 拆成 5A、46 和 32。5A 是 5 × 16 + 10 = 90,46 是 4 × 16 + 6 = 70,32 是 3 × 16 + 2 = 50。颜色是 rgb(90, 70, 50),这就是本页开头的例子。
为什么数字从 0 到 F
十六进制需要十六个符号,所以 9 之后是字母 A 到 F,代表 10 到 15。一对这样的数字给出 16 × 16 = 256 个值,恰好是一个字节所能容纳的。屏幕颜色是三个字节,而十六进制只是书写它们的一种紧凑方式:六个字符,而不是带逗号和括号的三个数字。
大写和小写
#5a4632 和 #5A4632 是同一种颜色。CSS 两者都接受,本换算器也是。为一个项目选定一种惯例并坚持,因为大小写混用会使搜索样式表更困难。
转换保留什么、无法保留什么
它精确地保留颜色
十六进制和 rgb() 是同样三个数字的两种拼写,红、绿、蓝各 0 到 255,所以没有任何东西被近似,往返会回到起点。把 HEX 转换成 RGB 再换回来,您得到的是开始时的同一个代码,大写字母可能是唯一的例外。
它带过去透明度
用于透明度的第四个值也被带过去:#RRGGBBAA 变成 rgba(),反之亦然。最后一对是 alpha 通道,从 00(完全透明)到 FF(完全不透明)。所以 #5A463280 是 rgba(90, 70, 50, 0.5),因为十六进制的 80 是 128,而 255 中的 128 约为一半。所有当前的浏览器都接受八位数字。
它无法描述 sRGB 之外的颜色
两种拼写描述的都是 sRGB,屏幕三十年来一直使用的色彩空间。它们无法描述其外的颜色,而这正是较新的 CSS 记法 lab()、oklch() 和 color() 存在的原因。现代显示器能显示比 sRGB 所含更饱和的颜色,在广色域工具中挑选了这样颜色的设计师,会看到它在写成十六进制时被裁剪到 sRGB。
简写被展开,而不是被保留
简写被展开而不是被保留:#abc 回来是 #AABBCC,即用长写法写出的同一种颜色。每个数字都被加倍。这意味着您可以粘贴三位代码并得到正确的数字,但无法通过观察从长的拼写还原短的拼写,只能通过检查每一对是否重复。
常见颜色及其数字
几个值得记住的
白色是 #FFFFFF,即 rgb(255, 255, 255):三种光全功率。黑色是 #000000,rgb(0, 0, 0):完全没有光。纯红是 #FF0000,绿是 #00FF00,蓝是 #0000FF。中灰是任何三对相等的代码,如 #808080,即 rgb(128, 128, 128)。相等的对总是意味着灰色,因为三种光的量相等就没有色相。
一眼读懂代码
一旦您知道这个模式,就可以从十六进制数字估计颜色。以较高的第一对开头的代码偏红,较高的中间一对偏绿,较高的最后一对偏蓝。#FF8800 是很多红、一些绿和没有蓝,那是橙色。您不需要工具来做这件事,但需要工具来得到精确的数字。
如何在这里把 HEX 转换成 RGB
输入或粘贴十六进制代码
在第一个字段中输入颜色,带不带井号都可以。接受三位、六位和八位数字的形式。
读取 rgb 值
答案立刻出现在另一个字段中,形式是 rgb(90, 70, 50),如果代码带有透明度则是 rgba()。页面显示句子 #5A4632 = rgb(90, 70, 50),方便您一眼核对。
把它复制到您的代码里
把结果粘贴到要求它的样式表、脚本或工具里。如果您需要三个数字分开,它们就是括号里的那些。
这些记法从哪里来
十六进制和 RGB 是同一件事写了两遍
屏幕颜色是三个数字,表示发出多少红、绿、蓝光,每个从 0 到 255,恰好是一个字节。十六进制只是把这些字节写成十六进制,所以 #FF8800 和 rgb(255, 136, 0) 是对同一个像素的同一条指令。
HSL 与 CMYK
HSL 的发明是因为两者对人来说都不易读:它把色相表示为色轮上的一个角度,饱和度和明度为百分比,这样设计师可以让某个东西更亮,而不必重新计算三个数字。CMYK 完全属于另一个世界,是油墨而不是光。它是减色的,由四块印版构成,并且无法达到屏幕能显示的每一种颜色,因为屏幕发光而纸只是反射光。关于这些,请看HEX 转 HSL和HEX 转 CMYK。
您在哪里遇到它们
在样式表中
十六进制是您在样式表中键入的,也是设计工具递给您的。RGB 出现在颜色需要运算的地方:渐变、透明度、计算色调的代码。了解两种拼写并能在它们之间转换,是日常前端工作的一部分。
在脚本和画布绘图中
绘图代码常常想要三个数字分开,用来混合两种颜色、把一种颜色加深固定的量,或测试某个像素是否匹配目标。把 HEX 转换成 RGB 直接给您这些数字。
在图形和图像工具中
图像编辑器通常把颜色显示为三个数字或十六进制代码,并让您输入任一种。在二者之间转换,让您可以在想要数字的程序里重现网页上的颜色。
在文档和品牌指南中
品牌指南可能以十六进制列出网页的颜色,以 RGB 列出屏幕的颜色,以 CMYK 列出印刷的颜色。让前两者一致只需一次转换,这是在一千份传单上印出之前就能抓住笔误的那种检查。
RGB 形式的实际用途
不用第二种颜色的透明度
用 rgba(90, 70, 50, 0.5),您得到半强度的颜色,让它后面的东西透出来。这是用品牌色制作叠层、阴影和带色调的背景而不发明新颜色的标准办法。
计算更浅和更深的色调
要让悬停状态稍深一点,脚本可以从三个数字中各减去一个固定的量。在十六进制字符串上做同样的事很别扭;在 rgb 上则是简单的算术。如果您需要基于色相的调整,请改为把 HEX 转换成 HSL。
对比度检查
无障碍工具根据红、绿、蓝值计算两种颜色之间的对比度。有了这些数字,您可以自己做计算,或把它们粘贴到检查器里,以确认背景上的文字可读。
把 HEX 转换成 RGB 时的陷阱
忘了 alpha 一对
八位代码的最后两位是透明度。如果您把它们去掉,就丢失了透明度。在判定结果就是颜色之前,检查代码的长度。
弄混顺序
十六进制是红、绿、蓝。少数格式和一些旧的图形 API 使用蓝、绿、红。如果某种颜色在特定程序中出来不对,请检查它的通道顺序。
从截图复制
从截图读取的颜色是经过屏幕色彩管理和任何压缩之后的颜色。它可能与源文件中的颜色略有不同。尽可能使用设计文件。
以为屏幕之间一致
两块屏幕显示同一代码略有不同。数字是精确的;您看到的取决于显示器及其配置文件。
人们在转换之前问的问题
RGB 中的 #FF0000 是什么?
rgb(255, 0, 0),纯红。
RGB 中的 #FFFFFF 是什么?
rgb(255, 255, 255),白色。
我能转换三位代码吗?
可以。每个数字被加倍:#09C 变成 #0099CC,即 rgb(0, 153, 204)。
转换是精确的吗?
是的。它是同样三个数字的两种拼写。
我的颜色会被上传吗?
不会。算术在您的浏览器中运行,不会向任何地方发送任何内容。
如何换回去?
用RGB 转 HEX,它把三个数字写成十六进制代码。
把 HEX 转换成 RGB 时明智的选择
知道接下来需要什么
如果您需要透明度,rgba() 是自然的形式。如果您需要调整明度或色相,HSL 更容易。如果颜色要印刷,CMYK 是下一步,带着该转换所携带的注意事项。请看RGB 转 CMYK。
把十六进制作为母版保留
对于品牌调色板中的颜色,把十六进制代码作为参考保留。它简短、无歧义,到处都被理解。在需要时从它派生其他形式。
使用自定义属性
在 CSS 中,把颜色定义一次,如 --brand: #5A4632,并按名称引用它们。如果您需要 rgba() 的数字,也定义 --brand-rgb: 90 70 50。这样转换只做一次。
现代 CSS 与 RGB 形式
空格分隔的语法
当前的 CSS 接受带空格并用斜杠表示透明度的 rgb(),如 rgb(90 70 50 / 50%)。数字与逗号形式中的相同,所以转换的结果在两者中都有效。较旧的浏览器和一些工具期望逗号,所以当您不知道颜色会用在哪里时,逗号形式仍是稳妥的选择。
百分比与分数
RGB 也可以用百分比书写,如 rgb(35% 27% 20%),其中百分之 100 就是 255。本页给出整数,因为它们是十六进制所存储的,也是大多数工具所期望的。如果您需要百分比,把每个数字除以 255 再乘以 100。
三个数字的自定义属性
一个常见的技巧是只在自定义属性中存储三个数字,--brand-rgb: 90 70 50,并把它用作 rgb(var(--brand-rgb) / 0.5)。这让一个定义同时服务于实心和半透明的用途。当您为此目的把 HEX 转换成 RGB 时,只复制答案中的数字。
在实践中处理颜色
对照品牌指南检查
如果品牌指南对同一种颜色同时给出十六进制和 rgb,请转换其中一个并与另一个比较。不一致通常意味着指南中的笔误,在它被用在每个页面上之前发现它,值得花这一分钟。
把调色板保持为简短的清单
大多数网站使用五到八种颜色。把它们以两种形式写在一份笔记里。每次您需要为新组件把 HEX 转换成 RGB,都可以查阅而不是重新算一遍,调色板也保持一致。
按角色命名颜色
像主色、表面和警告这样的名称比像绿色或棕色这样的名称更能经受改版。转换给您数字;名称说明它们是干什么用的。
相关转换器
同一系列的工具涵盖相邻的转换。要换回去,请用RGB 转 HEX。对于按色相描述的颜色,HEX 转 HSL和HSL 转 HEX就在手边,对于印刷,有HEX 转 CMYK、CMYK 转 HEX和CMYK 转 RGB。对于同一样式表中的尺寸,px 转 rem和px 转 em为长度所做的,就是本页为颜色所做的。
一个实例
假设您的品牌色是 #1E7A5C,您想要一个半透明版本作为卡片背景。您输入代码,读到 rgb(30, 122, 92)。在样式表中您写 background: rgba(30, 122, 92, 0.12),同样绿色的非常浅的色调,以及边框 rgba(30, 122, 92, 0.4)。卡片舒服地坐在白色页面上,也坐在灰色页面上,因为透明度让页面透出来。当品牌色日后改变时,您在一个自定义属性中替换三个数字,每个色调都会跟着改变。
一份简短的清单
转换之前
检查代码的长度:三位、六位还是八位。决定您是否需要透明度。
转换时
粘贴代码,读取 rgb 值,并连同括号一起复制,或只复制三个数字。
转换之后
在上下文中、在真实的背景上测试颜色,并检查位于其上的任何文字的对比度。
常见错误
丢掉透明度那一对
八位意味着有 alpha。保留它,或把它转换成 rgba()。
弄混通道顺序
十六进制先是红。有些工具期望先是蓝。
把屏幕当作真相
数字是精确的。外观取决于显示器。
您的颜色留在您的设备上
计算在本地进行。您的数值由您自己的浏览器使用,不会向任何地方发送任何内容。事后没有什么需要删除,也没有账户要创建。这就是把 HEX 转换成 RGB 的朴素方式。
小结
要在这里把 HEX 转换成 RGB,输入或粘贴十六进制代码,立刻读取 rgb 值。转换精确地保留颜色:十六进制和 rgb() 是同样三个数字的两种拼写,红、绿、蓝各 0 到 255,所以没有任何东西被近似,往返会回到起点。用于透明度的第四个值也被带过去,因为 #RRGGBBAA 变成 rgba(),反之亦然。两种拼写描述的都是 sRGB,所以无法描述其外的颜色,简写被展开而不是被保留:#abc 回来是 #AABBCC。不会上传任何内容。