HEX 转 RGB：颜色转换到底怎么算
HEX 代码和 RGB 三元组只是同一个颜色的两种写法。下面讲清楚这层转换到底在做什么，以及设计师和开发者各自为什么用它。
- HEX 代码本质就是用十六进制（base-16）写的 RGB
- 每两位十六进制数字（00–ff）对应一个通道值（0–255）
- 转换就是分别读 R、G、B 三对数字：每个 = 16×第一位 + 第二位
- RGB 在代码里更好运算，HEX 在 CSS 和交付里更简洁
HEX 代码究竟是什么
像 #1f3fd9 这样的 HEX 颜色，是一个六位十六进制数，分成三对：1f、3f、d9。每一对是一个颜色通道——红、绿、蓝——用 base-16 书写，数字从 0–9 再到 a–f（代表 10–15）。所以每个通道能表示 256 个值（00 到 ff），和 RGB 的 0–255 完全是同一区间。
逐步换算
手算 #1f3fd9，对每一对算 16 × 第一位 + 第二位：
1f→ 16×1 + 15 = 31（红）3f→ 16×3 + 15 = 63（绿）d9→ 16×13 + 9 = 217（蓝）
所以 #1f3fd9 = rgb(31, 63, 217)。整个算法就这么简单——三次小乘法。
简写与透明度
三位 HEX 如 #1ad 是简写：每位翻倍，所以 #1ad = #11aadd。第七、八位（#rrggbbaa）用同样方式表示 alpha（不透明度）——ff 完全不透明，00 完全透明，80 约 50%。
什么时候用哪种
在 CSS、设计交付，以及任何需要紧凑字符串的场合用 HEX。当你需要在程序里操作颜色——变亮、混合、做动画——用 RGB（或 HSL），因为可以直接对各通道数值做运算。现代 CSS 两者通用。
常见问题
怎么手动把 HEX 转成 RGB？
把六位代码分成三对（RR、GG、BB），每对算 16 × 第一位 + 第二位，其中 a–f 代表 10–15。三个结果就是 0 到 255 的 R、G、B 值。
HEX 和 RGB 是一回事吗？
是的——它们描述完全相同的颜色。HEX 就是用十六进制写的 RGB。#1f3fd9 和 rgb(31, 63, 217) 是同一颜色的两种写法。
8 位 HEX 多出的那两位是什么意思？
最后两位表示 alpha（不透明度）：ff 完全不透明，00 完全透明，80 约 50%。换算方式和颜色通道完全一样。
HEX 大小写有区别吗？
没有区别——#1F3FD9 和 #1f3fd9 是完全相同的颜色。浏览器和 CSS 对十六进制数字大小写不敏感，用哪种纯粹是书写习惯。
一键转换任意颜色
HEX、RGB、HSL、CMYK、Lab、OKLCH 实时互转