RGB与十六进制色码：取色原理+实测，差在哪？

RGB与十六进制色码（HEX）是数字色彩中最常见的两种表示方式——RGB用0-255的三个数字描述红绿蓝分量，HEX用6位十六进制数（如#FF5733）表达同一颜色。截至2026年6月，所有主流设计软件（Photoshop、Figma、Sketch）均支持双向转换，但80%的初学者在手动换算时出错，根源在于十六进制与十进制互转的进制规则。

本文从《CSS颜色模块第4级规范》（W3C Recommendation）出发，拆解RGB与HEX的数学原理、转换公式、易混概念，并通过取色器完成一次端到端实测，最后给出常见翻车案例。

简史/来由

RGB色彩模型源于19世纪托马斯·杨的三色视觉理论，1931年CIE标准化。而十六进制色码随Web诞生——1995年Netscape浏览器率先支持#RRGGBB格式，因其比RGB()函数更紧凑（6字符 vs 12字符），迅速成为HTML/CSS默认色值表示法。至今，HEX仍是网页性能优化中最小化CSS体积的常用手段。

核心原理

数学定义

RGB：每个分量取值范围0-255（8位），共256³ ≈ 1677万色。
HEX：将每个RGB分量转换为2位十六进制数（00-FF），拼接为6位字符串，前缀#。

转换公式：

HEX = # + dec2hex(R) + dec2hex(G) + dec2hex(B)

其中dec2hex(n) = 将n除以16，商取整作为高位，余数作为低位，0-9对应数字，10-15对应A-F。

示例： RGB(255, 87, 51)

• R=255 → 255/16=15余15 → FF
• G=87 → 87/16=5余7 → 57
• B=51 → 51/16=3余3 → 33
• 结果：#FF5733

关键区别表

怎么算/一个端到端示例

场景：从一张图片中提取主色并转换为HEX

1. 打开取色器，上传一张风景照片（示例：夕阳海面）。
2. 点击海面最蓝的区域，工具显示RGB(41, 128, 185)。
3. 手动换算：
   • R=41 → 41/16=2余9 → 29
   • G=128 → 128/16=8余0 → 80
   • B=185 → 185/16=11余9 → B9
   • 结果：#2980B9
4. 点击历史色列表，工具自动记录该色值，并显示HEX码。
5. 复制#2980B9，粘贴到CSS或Figma中，颜色完全一致。

实测提示：若手动换算结果与工具显示不符，检查十六进制中A-F的大小写（标准规范不区分，但推荐大写）。

易混概念辨析

RGB vs RGBA vs HEX with Alpha

简写HEX vs 标准HEX

• 简写条件：每个分量两位相同（如#FF33AA可简写为#F3A）。
• 常见误区：#F3A ≠ #F30A（中间少一位），仅当R、G、B各自重复时才能简写。

实用工具

• 取色器：上传图片任意点取色，自动显示RGB、HEX、HSL，支持历史色列表。
• RGB转HEX工具：输入RGB值，一键生成HEX码，支持批量转换。

常见误区/翻车案例

误区1：HEX中字母必须大写

• 问题：使用小写#ff5733，浏览器是否兼容？
• 修正：CSS规范允许大小写，但团队协作中建议统一大写（可读性更好）。

误区2：RGB(255,255,255) = #FFFFFFF（多一位）

• 问题：手抖多写一个F，颜色变灰。
• 修正：HEX严格6位（或3位简写），多一位无效。

误区3：认为HEX比RGB更精确

• 问题：两者数学上完全等价，精度相同。
• 修正：选择取决于使用场景——CSS文件用HEX更短，设计稿注释用RGB更直观。

误区4：将#FFF理解为#FFFFFF

• 问题：简写#FFF实际为#F0F0F0？
• 修正：简写规则是重复每一位，而非补0。#FFF = #FFFFFF（白），#F0F = #FF00FF（品红）。

误区5：取色时忽略色彩空间

• 问题：从sRGB图片取色后直接用于Display P3显示器，颜色偏淡。
• 修正：确认取色工具使用的色彩空间（取色器默认sRGB），如需广色域输出，使用Display P3对应的HEX值。

本文不构成设计工具推荐，具体色彩管理请参考W3C CSS Color Module Level 4规范。