十六进制转 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 配置文件时它只是 近似,不是色准。