在前端开发或UI设计中，我们经常在 rgb(255, 100, 50) 和 #FF6432 之间来回切换。它们本质上描述的是完全相同的颜色，只是换了一身"数字外衣"。RGB 使用的是人类习惯的十进制，而 HEX 则是计算机更偏爱的十六进制。理解这背后的数学映射关系，不仅能让你告别死记硬背，还能帮你瞬间看懂色彩代码的秘密。如果你想快速验证转换结果，可以使用我们的 RGB转Hex工具 进行实时转换。
核心原理：进制的游戏
RGB 转 HEX 的本质，就是将代表红、绿、蓝三种颜色强度的三个十进制数字，分别转换为两位的十六进制数字，然后拼接在一起，并在开头加上 # 号。
HEX 的数学结构
标准的 HEX 颜色代码格式为 #RRGGBB。注意，它不是三个独立的数字，而是由六位“数字”组成的字符串。其中：
- 前两位 (RR)： 代表红色的强度，取值范围在十六进制下是 00 到 FF。
- 中间两位 (GG)： 代表绿色的强度。
- 后两位 (BB)： 代表蓝色的强度。
由于计算机只能识别二进制，十六进制就是二进制的“缩略语”。4位二进制数恰好对应1位十六进制数（例如 1111 = F），所以用六位十六进制数表达 24 位真彩色（1670万色）是非常紧凑高效的。
数字对照：破解十六进制的“字母密码”
十进制是逢十进一，数字由 0-9 组成。而十六进制是逢十六进一，除了 0-9 这十个符号外，还需要额外的六个符号来代表 10 到 15，于是引入了英文字母 A、B、C、D、E、F。
实战转换演算：三步完成映射
了解了符号对照，我们来看一道具体的计算题：如何将 rgb(26, 45, 156) 转换为 HEX 代码？
第一步：拆解通道
把 RGB 拆成独立的三个十进制数：红 = 26，绿 = 45，蓝 = 156。
第二步：分别进行“除16取余”
将每一个十进制数除以16，得到的商和余数就分别对应十六进制的两位（高位和低位）。
计算红色通道 (26)：
26 ÷ 16 = 1 余 10 → 1 对应 1，10 对应 A → 结果是 1A
计算绿色通道 (45)：
45 ÷ 16 = 2 余 13 → 2 对应 2，13 对应 D → 结果是 2D
计算蓝色通道 (156)：
156 ÷ 16 = 9 余 12 → 9 对应 9，12 对应 C → 结果是 9C
第三步：拼接并加 # 号
将红、绿、蓝的结果拼接在一起：1A + 2D + 9C，并在开头加上 #。最终得出：#1A2D9C。
💡 速算小贴士： 如果你经常需要手动换算，请记住几个关键节点：255 对应 FF（满色），128 对应 80（半透明/灰阶中点），0 对应 00（无色）。RGB 的 0-255 范围与 HEX 的 00-FF 范围是完美线性映射的。
特殊情况处理：缩写与透明度
掌握了标准六位代码后，你还会遇到几种衍生形式：
- 三位缩写 HEX： 如果 #RRGGBB 中，R、G、B 各自的两位数字都相同（如 #FF00CC 不满足，#FF00AA 也不满足，必须是 #FF0088 中 00 和 88 这种），可以缩写成 #F08（每一位代表重复的两位数）。例如 #FFF 等于 #FFFFFF，这是纯白。
- 八位带透明度的 HEX： #RRGGBBAA，末尾的 AA 代表 Alpha 通道，同样是从 00（全透明）到 FF（不透明）。
- CSS Level 4 现代写法： 如今浏览器支持直接在 rgb() 中写入透明度且无需逗号，如
rgb(26 45 156 / 0.5)，但底层逻辑依然没有跳出 RGB 的数值体系。
逆向工程：HEX 转回 RGB
逆向转换同样简单，就是“乘16相加”。
🔧 以 #A52A2A (棕色) 为例：
拆出红色 A5：A=10，5=5 → 10 × 16 + 5 = 165
拆出绿色 2A：2=2，A=10 → 2 × 16 + 10 = 42
拆出蓝色 2A：与绿色相同 → 42
最终结果：rgb(165, 42, 42)。
你会发现，整个过程就像是在做一种简单的加密与解密。之所以前端和设计工具默认两种格式都支持，就是因为这种转换完全无损且精确，不涉及任何色彩空间的转换，只是同一数字的不同表达方式。
“颜色从光到像素，从油墨到代码，变的是承载的介质，不变的是人类对美的编码与解码。理解 RGB 转 HEX，就是拿到了进入数字调色盘底层的数学钥匙。”
下次在 CSS 里写颜色或使用取色器复制代码时，看到那一串六位字符，你看到的将不再是无意义的乱码，而是红绿蓝三色光的精确强度密钥。即使离开工具，你也能凭借一支笔一张纸，推算出任何色彩的数字指纹。