HEX与RGB本质是同一颜色模型的两种写法，HEX是RGB的十六进制简写，二者等价且无性能精度差异；设计师用HEX便于复现，开发者用RGB便于微调、脚本控制和透明度处理。
十六进制（HEX）和 RGB 本质是同一种颜色模型（RGB 色彩空间）的两种写法，区别只在“怎么写”，不在“怎么算”——HEX 是 RGB 的十六进制压缩表达。
HEX 是 RGB 的“简写编码”，不是独立颜色系统
比如 #ff6b35 和 rgb(255, 107, 53) 完全等价：
- #ff → 十六进制 ff = 十进制 255（红）
- #6b → 十六进制 6b = 十进制 107（绿）
- #35 → 十六进制 35 = 十进制 53（蓝）
浏览器解析时，会把 HEX 自动转成 RGB 内部值再渲染。没有“HEX 更快”或“RGB 更准”这种性能/精度差异。
为什么设计师给 HEX、开发者却常改用 RGB？
关键不在颜色本身，而在「可操作性」：
- HEX 适合复制粘贴和静态复现：
#09c看似短，但它是#0099cc的简写，人脑无法直接看出亮度或是否偏灰 - RGB 适合微调和脚本控制：想让按钮悬停时“变亮 10%”，
rgb(255, 107, 53)改成rgb(255, 130, 80)直观；而#ff6b35改成什么？得开取色器或计算器 - RGB 天然支持百分比写法：
rgb(100%, 42%, 21%)，方便与设计系统中的相对比例对齐
容易踩的坑：简写 HEX 和透明度的错觉
常见误解：
-
#f63≠rgb(255, 66, 3)，而是rgb(255, 102, 51)（f→ff,6→66,3→33） - HEX 本身不带透明度：
#ff6b3580是 CSS 新增的 8 位写法（RRGGBBAA），但 IE 完全不支持，实际项目中仍需 fallback 到rgba() - HEX 颜色值大小写不敏感，但团队协作时建议统一小写（
#ff6b35），避免 Git 提交里无意义的变更
真正要纠结的不是“用哪个”，而是“谁在什么时候改它”：品牌色、设计定稿用 HEX；需要 JS 动态调节、主题切换、透明叠加的场景，直接上 RGB 或 RGBA——别硬把 rgba() 拆成 HEX 去套用，那是在给自己加解码负担。
立即学习“前端免费学习笔记（深入）”；
