8位HEX色值写作#RRGGBBAA格式，即在6位RGB色值后直接追加2位十六进制透明度（AA），如#ff000080表示半透明红色；AA=00为完全透明，FF为完全不透明，80对应128/255≈50%不透明度，非80%透明。
8位HEX颜色值怎么写？
直接在6位HEX后面加2位十六进制数表示alpha通道，比如#ff000080就是半透明红色。前6位ff0000是RGB，后2位80对应alpha=128（十进制），约50%不透明度。
常见错误是把80当成“80%透明”——其实它代表的是不透明度，00才是完全透明，FF才是完全不透明。别按百分比直觉硬凑，查对照表更稳。
-
#00000000→ 完全透明黑色 -
#ffffffcc→ 浅灰，约80%不透明（cc= 204） -
#1a2b3c4d→ 合法但难记，建议只用整十/整五档（如80、66、33）
为什么不用RGBA而选8位HEX？
当你只需要给background-color或border-color加透明度，又不想影响文字、子元素时，8位HEX和RGBA效果等价，但更轻量。
优势很实在：不用拆RGB、不用算小数、不用拼字符串；CSS变量里也能直接用（--primary: #0b79b966），比存RGBA字符串干净得多。
立即学习“前端免费学习笔记（深入）”；
- RGBA要写
rgba(11, 121, 185, 0.4)，8位HEX就是#0b79b966 - 微信小程序、Chrome、Firefox、Safari（≥16.4）、Edge（≥110）都支持，iOS Safari从16.4起也稳了
- 不支持的旧浏览器（IE、Android WebView #000）——所以务必配fallback
4位HEX透明简写靠谱吗？
可以，但限制极多：#RGBA要求R=G=B=A，也就是每个字符必须重复两次才成立。比如#f0a8展开是#ff00aa88，不是#f0a00088。
实际项目里几乎没人靠它省事——UI给的色值基本不满足这个条件，强行用反而容易写错。不如老实用8位HEX或RGBA。
-
#0b79→ 合法，等于#00bb7799 -
#abc2→ 非法，浏览器当无效值处理 - 想快速验证？把
#RGBA粘到DevTools里看是否生效，不生效就立刻切回8位
CSS变量里怎么安全用8位HEX？
可以直接定义，但要注意变量本身不能带计算逻辑——CSS变量不解析HEX里的alpha位，它就是个字符串。
比如--bg: #24242480没问题，但background-color: var(--bg)在旧浏览器里可能完全失效。稳妥做法是双保险：
- 先写fallback：
background-color: #242424; background-color: var(--bg); - 别指望用
var(--bg)再叠加opacity——那会把整个元素变透明，违背初衷 - 如果需要动态改透明度，JS侧做hex→rgba转换更可控（尤其在微信小程序里）
真正容易被忽略的是兼容性兜底：哪怕现在主流浏览器全支持，CI构建或某些WebView仍可能卡在旧内核，background-color没fallback就等于背景消失。写完记得删掉background-color看看页面是否崩。
