CSS变量如何转换十六进制颜色透明度？

CSS变量不能直接用于rgba()因解析为字符串而非数值，Safari不支持#RRGGBBAA，最稳解法是拆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() 函数只接受三个数字加一个小数，比如 rgba(255, 107, 53, 0.5)。传字符串进去，整个声明被丢弃，控制台无提示。

1. Chrome/Firefox/Edge 支持 #RRGGBBAA，但仅限**直接写死在属性值里**，不支持变量间接引用
2. Safari（iOS 17/macOS 14）至今不解析 #RRGGBBAA，哪怕你写了 background: #ff6b3580，它也当无效处理
3. color-mix() 或 color() 函数尚无稳定实现，别指望靠它从 hex 提取 alpha

最稳的解法：拆 RGB + 单独存 --alpha

把颜色拆成数字分量，再用 rgb()/rgba() 组装，兼容所有现代浏览器（包括 Safari 12+）。

1. 先手动或用工具把 #ff6b35 转成 255, 107, 53，存为 --primary-rgb: 255, 107, 53
2. 透明度统一用小数（0–1），比如半透写 --primary-alpha: 0.5，别混用 50% 或 128
3. 不透明时：color: rgb(var(--primary-rgb));
4. 要透明时：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;}

1. IE 和旧 Safari 忽略第二行，靠第一行保底；新浏览器覆盖第一行，用第二行（更简洁）
2. 千万别反着写——老浏览器跳过第一行，第二行又无效，结果背景变透明或继承父色
3. #RRGGBBAA 必须严格 8 位小写，#ff6b3580 ✅，#FF6B3580 ❌，"#ff6b3580" ❌，#ff6b35 80 ❌

真正容易被忽略的是：alpha 值单位必须全局一致，且 RGB 分量变量名最好带提示，比如 --primary-rgb 而不是 --primary——否则别人（或一周后的你）看到 var(--primary) 根本不知道它能不能传进 rgba()。