优先选 #RRGGBBAA 的场景是：需在 CSS 变量、CSS-in-JS 或设计系统中统一管理颜色，且不兼容 IE 或旧版 Safari；使用时须确保浏览器支持、透明度值正确、无空格或引号。
直接用 #RRGGBBAA 是可行的，但必须确认目标浏览器支持、透明度值写对、且没混入空格或引号——这三点错一个，样式就静默失效。
什么时候该用 #RRGGBBAA 而不是 rgba()
优先选 #RRGGBBAA 的场景是：需要在 CSS 变量、CSS-in-JS 或设计系统中统一管理颜色，且不打算兼容 IE 或旧版 Safari（rgba() 更紧凑，也避免了把十六进制转十进制的手动计算。
- 适合现代项目（Chrome/Firefox/Edge/Safari 16+）
- 可用于
color、background-color、border-color等所有接受颜色值的属性 - 不能用于
opacity属性本身——那是作用于整个元素的，和颜色透明度无关 - 如果项目仍需支持 Safari ≤15 或 IE，必须回退到
rgba()
#RRGGBBAA 的格式陷阱与校验要点
浏览器对这个格式极其敏感，错一位、多一个空格、少一个字符，整条声明就被丢弃，控制台还不报错。
- 必须是连续 8 个十六进制字符，不能有空格、换行、引号：
#ff6b3580✅，"#ff6b3580"❌，#ff6b35 80❌ -
AA是透明度通道，FF= 完全不透明，00= 完全透明；别误以为80表示“80% 透明”，它实际对应 50% 不透明（即 50% 透明） - 简写只在严格满足
#RGBA（4 位）时才有效，例如#f35a→#ff3355aa；但#ff6b35无法简写成 4 位，硬写#f635会变成完全不同的颜色 - 大小写不敏感，但团队协作建议统一小写，避免
#FF6B3580和#ff6b3580混用引发 diff 冗余
透明度值 AA 怎么快速换算
别每次打开计算器。记住这几个高频值，复制即用：
立即学习“前端免费学习笔记（深入）”；
- 100% 不透明 →
FF（等价于原六位色值） - 70% 不透明（30% 透明）→
B3 - 50% 不透明（50% 透明）→
80 - 30% 不透明（70% 透明）→
4D - 0% 不透明（完全透明）→
00
例如想让 #ff6b35 半透，直接拼成 #ff6b3580；想 30% 透，就写 #ff6b354D。
CSS 变量里用 #RRGGBBAA 的注意事项
在 :root 里定义带透明度的十六进制变量是没问题的，但要注意：变量值本身仍是字符串，不能靠 CSS 自动解析透明度逻辑。
- 正确：
--primary: #ff6b3580;，然后color: var(--primary); - 错误：
--primary: #ff6b35;+--alpha: 80;，再试图拼接var(--primary)var(--alpha)—— CSS 不支持字符串拼接 - 如需动态控制透明度，推荐用
rgba()配合hsl()变量，或用 JS 注入计算后的完整色值
最易被忽略的一点：8 位色值在 CSS 自定义属性中一旦写错，不会像语法错误那样高亮，而是悄无声息地 fallback 到初始值（比如 color 变成黑色），排查时得逐个检查变量内容是否真被解析成了有效颜色。
