8位HEX透明度AA必须是十六进制整数（00–FF），对应十进制0–255，非小数；0.5应转为7f（127/255≈50%），而非50（80/255≈31%），换算公式为Math.round(255×alpha).toString(16).padStart(2,'0')。
不能直接用0到1的小数控制8位HEX的透明度——它只认十六进制的AA两位，必须手动换算。
为什么#rrggbbaa里的aa不是小数
浏览器解析#rrggbbaa时，最后两位aa被当作十六进制整数（00–FF），对应十进制0–255。它和rgba()里的alpha参数（0–1）语义相同，但数值系统完全不同：
-
00→ 十进制0 → 完全透明（≈rgba(r,g,b,0)） -
7f→ 十进制127 → ≈50%不透明（不是0.5直译成50） -
ff→ 十进制255 → 完全不透明（≈rgba(r,g,b,1)）
写#ff000050看似“50%”，实际是十进制80/255≈31%不透明——这是最常翻车的点。
怎么把小数透明度快速转成合法aa
别心算，用这个公式： Math.round(255 * alpha) → 转十六进制（补前导零）
立即学习“前端免费学习笔记（深入）”；
-
0.6→255 * 0.6 = 153→99→#rrggbb99 -
0.25→255 * 0.25 = 63.75 → 64→40→#rrggbb40 -
0.85→255 * 0.85 = 216.75 → 217→d9→#rrggbbd9
记住几个硬核值：ff（100%）、cc（80%）、99（60%）、7f（50%）、4d（30%）、33（20%）、00（0%）。
CSS变量里用#rrggbbaa的三个致命陷阱
在:root里定义--color: #ff6b3580没问题，但使用时极易静默失败：
- 加引号：
--color: "#ff6b3580"→ 变量值变成字符串，color: var(--color)直接失效 - 少一位或大小写混用：
#ff6b358或#FF6B3580→ 整条声明被跳过，控制台零提示 - 想拼接：
--bg: #ff6b35 + "80"→ CSS不支持字符串运算，语法无效
变量必须严格写成--color: #ff6b3580，且调用时只能color: var(--color)原样透出——没中间态，错一位就回退到初始值（比如黑色）。
兼容性 fallback 必须手写，顺序不能错
#rrggbbaa是CSS Color Level 4标准，Chrome 65+、Firefox 49+、Edge 79+、Safari 12.1+支持，但IE、旧安卓WebView、Safari ≤15一律不认。它不会自动降级，必须显式写fallback：
background-color: #2c3e50; background-color: rgba(44, 62, 80, 0.85); background-color: #2c3e50d9;
顺序反了（比如把#2c3e50d9放第一行），IE8及以下会跳过所有声明，背景变透明黑。最稳兜底仍是rgba()——IE8+、Android 2.3+、iOS 4.3+全支持，且alpha必须是0–1小数（rgba(0,0,0,0.7)✅；rgba(0,0,0,70%)❌）。
八位色值一旦出错，既不报错也不提示，只默默失效——盯住那8个字符，比查文档快得多。
