CSS 变量不能直接放进 rgba() 中使用，原因并不复杂：变量解析后的结果本质上是字符串，而不是 rgba() 所要求的数值参数；另外，Safari 对 #RRGGBBAA 这种十六进制透明色写法的兼容性也不稳定。相比之下，更推荐的 CSS 颜色透明度处理方式，是把 RGB 分量拆开，分别保存为 --primary-rgb，再结合 --primary-alpha 一起调用，写成 rgba(var(--primary-rgb), var(--primary-alpha))。
不要直接在 CSS 变量中写 #RRGGBBAA 然后当作透明颜色使用——Safari 兼容性不足，rgba(var(--color), 0.5) 这种写法也会失效，而且浏览器通常不会报错，只会静默 fallback 到黑色、默认值或继承色。
为什么 var(--primary) 不能直接放进 rgba()
这是因为 var(--primary) 解析后得到的是字符串，例如 "#ff6b3580" 或 "#ff6b35"，而 rgba() 函数要求传入的是三个 RGB 数字加一个透明度小数，例如 rgba(255, 107, 53, 0.5)。如果把字符串直接传进去，整条 CSS 声明会被浏览器判定为无效，且控制台通常没有明显提示。
- Chrome、Firefox、Edge 虽然支持
#RRGGBBAA，但通常仅限于**直接写在属性值中**，不适合通过 CSS 变量间接引用 - Safari（iOS 17/macOS 14）目前仍不能稳定解析
#RRGGBBAA，即使你直接写background: #ff6b3580，它也可能视为无效值 color-mix()和color()等函数目前还没有足够稳定的浏览器支持，不能作为从 hex 提取透明度的可靠方案
最稳定的方案：拆分 RGB + 单独保存 --alpha
更稳妥的做法，是先把颜色值拆成数字形式的 RGB 分量，再通过 rgb() 或 rgba() 进行组合。这种 CSS 变量透明度写法兼容大多数现代浏览器，包括 Safari 12+。
- 先手动转换，或借助颜色工具把
#ff6b35转为255, 107, 53，然后保存为--primary-rgb: 255, 107, 53 - 透明度建议统一使用
0–1之间的小数，例如半透明写成--primary-alpha: 0.5，不要混用50%或128 - 不透明颜色可写为：
color: rgb(var(--primary-rgb)); - 需要透明效果时可写为：
background: rgba(var(--primary-rgb), var(--primary-alpha));
想继续复用原来的 hex 变量？必须写 fallback，顺序也不能错
如果你已经定义了 --primary: #ff6b35，又不想调整现有结构，那么只能通过手动 fallback 来兼容处理，并且顺序一定要保证 rgba() 在前、#RRGGBBAA 在后：
button {
background: rgba(255, 107, 53, 0.5);
background: #ff6b3580;
}
- IE 和旧版 Safari 会忽略第二行，此时依靠第一行的
rgba()作为兼容兜底；新浏览器则会覆盖第一行，优先使用第二行，更简洁 - 一定不要反过来写——老浏览器可能跳过第一行，而第二行又无法识别，最终导致背景透明、失效或继承父元素颜色
#RRGGBBAA必须保持严格的 8 位小写格式，#ff6b3580✅，#FF6B3580❌，"#ff6b3580"❌，#ff6b35 80❌
实际开发中最容易忽略的一点是：alpha 透明度的单位必须全局统一，同时 RGB 分量变量名最好带有清晰提示，例如使用 --primary-rgb，而不是直接写成 --primary——否则无论是团队成员，还是一周之后的你自己，看到 var(--primary) 时都很难立刻判断它是否可以直接传入 rgba()，这也是 CSS 变量颜色管理中常见的问题。
