HEX颜色值#RRGGBB按两位拆分为红、绿、蓝三通道，每通道范围00–FF（0–255）；3位简写#abc等价于#aabbcc；8位#RRGGBBAA支持透明度但旧浏览器需降级为rgba()；理解HEX便于快速定位颜色偏差。
HEX 颜色值怎么拆：#RRGGBB 就是红、绿、蓝三通道
HEX 颜色值本质就是 RGB 的十六进制压缩写法，#RRGGBB 中的每两位分别对应一个颜色通道：RR 是红色（Red），GG 是绿色（Green），BB 是蓝色（Blue）。每个通道取值范围是 00（0）到 FF（255），和 rgb(255, 0, 0) 完全等价。
比如 #ff6347：
-
ff→ 红色 = 255（满） -
63→ 绿色 = 99（中等偏低） -
47→ 蓝色 = 71（偏低）
合起来就是偏红的暖色调（番茄红）。你不需要背换算表，浏览器开发者工具里鼠标悬停 HEX 值，会直接显示对应的 rgb() 和预览色块。
3位简写 HEX（如 #abc）怎么展开？不是“补零”，是“复制”
很多人误以为 #abc 是 #a0b0c0，其实它是把每位**复制一次**，变成 #aabbcc。这是 CSS 规范明确规定的简写规则。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 写成
#f80却以为是#f08000→ 实际是#ff8800（橙黄色） - 想写深灰
#333却错打成#33→ 浏览器直接忽略该声明
记住口诀：三位简写 = 每位自复制一次，没有例外。
带透明度的 HEX（#RRGGBBAA）兼容性要注意什么？
现代浏览器（Chrome 119+、Firefox 116+、Safari 16.4+）已支持 8 位 HEX（#RRGGBBAA），比如 #ff000080 表示半透红。但 IE 完全不支持，旧版 Android WebView（≤4.4）也解析失败。
如果你必须兼顾老环境：
- 优先用
rgba(255, 0, 0, 0.5)—— 兼容 IE9+ - 避免在关键 UI（如文字遮罩、按钮禁用态）中单独依赖 8 位 HEX
- 用 PostCSS 插件（如
postcss-hexrgba）可自动降级为rgba()
为什么看懂 HEX 对调试和协作很重要？
设计稿给的 #3cb371，前端直接贴过去，但测试发现“绿色太暗”——这时你得快速判断：是不是 b3（绿=179）比预期的 cc（204）低了？要不要微调成 #3ccc71？
真正卡点往往不在“会不会写”，而在“能不能一眼看出哪个通道偏弱/过强”：
- 纯灰一定是
RR == GG == BB（如#787878） - 偏紫？说明
RR和BB都高，GG相对低（如#aa44cc） - 颜色发“脏”？大概率是三个通道数值接近但不相等（如
#a8a19d），接近灰但又没完全灰
HEX 不是黑盒代码，它就是 RGB 的快照。拆开看，你就掌握了调色的第一步控制权。
