十六进制转 RGB 颜色

粘贴一个十六进制色号即刻得到 RGB 三通道值,同时给出 HSL、HSV 和 CMYK,全部在浏览器本地算。

#4B994A
  • HEX#4B994A
  • RGBrgb(75, 153, 74)
  • HSLhsl(119, 35%, 45%)
  • HSVhsv(119, 52%, 60%)
  • CMYKcmyk(51%, 0%, 52%, 40%)

CMYK 是不带色彩配置文件的朴素换算,只能当印刷的起点,不能当色准依据。与白底的对比度是 3.53:1 ,供参考。

十六进制转 RGB 怎么用

  1. 1输入或粘贴一个十六进制色号。井号可省略,三位简写也支持。
  2. 2从第二行读出 RGB 三通道,或者读下面任意一种表示法。
  3. 3点某一行就把那个值复制到剪贴板。

十六进制转 rgb 的时候发生了什么

那个十六进制字符串被切成三对,每一对按 16 进制读成一个数。#4B994A 变成 4B、99、4A,十进制就是 75、153、74。整个换算就这些,所以它即时出结果,除了字符串什么都不需要。

什么都没丢。十六进制和 RGB 是同三个字节的两种写法,所以来回转换在两个方向上都是精确的。

简写的那个坑

三位十六进制的展开方式是把每一位复制一遍,不是补零。

#F80#FF8800。中间那个 8 变成 0x88,十进制 136。直觉但错误的读法是它变成 0x80,也就是 128;这个差别小到扫一眼看不出来,又大到两个颜色并排放着就能看见。

复制这件事也解释了为什么简写只能表示一小部分颜色:每个通道的两位数字必须相同。那就是每通道 16 种 取值而不是 256 种,1677 万里只有 4096 种。如果一个色号写不成三位,那它就没有简写形式。

什么时候你要的就是 RGB

透明度是主要原因。rgb(75 153 74 / 0.5) 把不透明度写成一个能读懂的分数;而等价的八位十六进制结尾 是 80,你得知道 80 是十六进制的 128、大约是 255 的一半。

算出来的颜色是第二个原因。如果某个通道来自变量、滑块或者动画的某一帧,把三个数字交给 rgb() 是 直接的,而拼十六进制字符串意味着每个通道都要转成 16 进制再补足两位。

图像和 canvas 处理是第三个。像素数据本来就是整数通道,转成十六进制只为了让某个东西马上再解析回去, 是白费力气。

这一页上其他几种表示法

HSL 给你色相、饱和度、明度,这是"想调整一个颜色"而不是"想指定一个颜色"时该用的表示法:挪一下色相 或者压暗一点明度,都是改一个数字的事。

HSV 对应 Photoshop 和 Figma 取色器里显示的那一种。CMYK 是给印刷准备的,但没有 ICC 配置文件时它只是 近似,不是色准。

常见问题

前面那个井号有讲究吗?
这里没有。CSS 要求带它,但大家从设计工具和表格里抄值时经常不带,所以这里两种都收。输出一律带井号,因为那才是你要粘进样式表的形式。
三位简写是怎么展开的?
每一位复制一遍。#F80 变成 #FF8800,中间那个 8 变成 0x88(136),不是 0x80(128)。补零是很常见的误解,而且会得到一个看得出差别的颜色。
八位的十六进制怎么办?
最后两位是透明度。本工具读前六位、给出不透明的那个颜色,因为它输出的所有表示法描述的都是不透明色。你原文件里的透明度并没有丢,只是这里不显示。
十六进制在 CSS 里明明能用,为什么还需要 RGB?
主要是为了透明度和算出来的值。rgb(75 153 74 / 0.5) 比八位十六进制好读好改;而任何由变量或动画拼出来的颜色,用三个数字组装都比拼一个补过位的字符串容易。

更多免费工具