rgb 转十六进制的时候发生了什么
什么都没丢,也什么都没多:它们是同三个数字的两种写法。RGB 用十进制写每个通道,范围 0 到 255;
十六进制用 16 进制把同一个通道写成两个字符。rgb(75, 153, 74) 和 #4B994A 逐字节是同一个颜色。
换算是逐通道做的:75 的十六进制是 4B,153 是 99,74 是 4A,拼起来就是色号。整个操作就这些,这也 是这一页为什么即时出结果、且压根不需要文件。
十六进制为什么会存在
每通道两个字符意味着一个颜色永远正好六个字符,这让它在早期 HTML 和 CSS 里既紧凑又无歧义。十进制
通道的长度从一位到三位不等,所以必须有分隔符和外壳,而 rgb(75,153,74) 是十三个字符,对比六个。
十六进制也和这个值的存储方式对得上。内存里一个颜色是三个字节,而一个字节正好是两位十六进制,所以 那个十六进制字符串就是这三个字节的直接转写,中间没有任何算术。
什么时候你想要的是 RGB
三种情况。
透明度,尤其是 alpha 会变的时候。rgba() 和现代的 rgb(r g b / a) 语法能在同一条声明里设透明度;
八位十六进制虽然也能做到,但多数人觉得 / 0.5 比 80 好读。
算出来的值,比如某个通道来自变量或动画。从数字拼十六进制字符串要做格式化和补位,而 rgb() 直接吃
数字。
canvas 和图像处理,像素数据本来就是每像素三个整数。把它们转成十六进制、再交给一个马上又要解析回去 的 API,是白干。
这一页上其他几种表示法
HSL 用色相角度加饱和度、明度来描述同一个颜色,手动调整时容易得多:色相偏 30 度、明度降 10%,都是 改一个数字的事,而在十六进制里等价的操作是三个互不相干的改动。
HSV 是 Photoshop 和 Figma 的取色器显示的那一种,所以从设计工具里抄值的时候,对齐它。
CMYK 是给印刷准备的,注意上面的说明:没有色彩配置文件时它只是个近似值。