不能直接给HEX颜色加透明度，CSS不支持#ff6b6b/0.3写法；必须先转为rgb()或hsl()函数形式（如rgb(255 107 107 / 0.3)）才能使用/语法，且无浏览器实现color(from #ff6b6b)等相对颜色语法。
不能直接给 HEX 颜色加透明度——CSS 不支持 #ff6b6b / 0.3 这种写法，也不存在“相对颜色语法”能原地改造 HEX 值。所谓“相对颜色”，是 CSS Color Level 5 提出的实验性能力（如 color(display-p3 red / 0.3)），但目前**无浏览器实现**，且不作用于 HEX 字符串。
为什么不能对 #ff6b6b 直接加 / 语法
CSS 的 / 透明度语法只接受 rgb()、hsl()、lab() 等函数式颜色模型，不接受十六进制字面量。写成 color: #ff6b6b / 0.3 会被整个声明忽略，控制台无报错，样式静默失效。
-
rgb(255 107 107 / 0.3)✅ 合法，现代浏览器全支持（Chrome 111+、Firefox 114+、Safari 16.4+） -
hsl(0 70% 60% / 0.3)✅ 合法，语义更直观，适合主题变体 -
#ff6b6b / 0.3❌ 解析失败，等价于没写这条规则 -
color(display-p3 #ff6b6b / 0.3)❌ 语法错误，display-p3后必须跟函数参数，不能接 HEX
真正可行的三步转换：HEX → RGB/HSL → / 语法
你得手动或借助工具把 HEX 拆解为数值，再套进支持 / 的函数里。关键不是“怎么加”，而是“怎么转得快又不出错”：
- 先去掉
#，判断长度：3 位（如f00）要扩展为ff0000；6 位（如ff6b6b）直接切分 - 用
parseInt(h.slice(0,2), 16)取 R，parseInt(h.slice(2,4), 16)取 G，parseInt(h.slice(4,6), 16)取 B（注意：别用slice(1,3)，那是老式带#的错切法） - 转 HSL 更推荐：在线工具或浏览器开发者工具的拾色器可一键显示 HSL 值，比手算 RGB 再转 HSL 快得多
- 最终写成：
background-color: rgb(255 107 107 / 0.3)或color: hsl(0 70% 60% / 0.3)
CSS 变量场景下怎么保持 HEX 原值又能用 / 语法
如果你已定义 --primary: #ff6b6b，又不想改它（因其他地方需纯色），就不能靠变量本身“动态加透明度”。CSS 当前没有 color(var(--primary) / 0.3) 这种语法。可行路径只有：
立即学习“前端免费学习笔记（深入）”；
- 另存一份 RGB 分量变量：
--primary-rgb: 255, 107, 107，然后用rgb(var(--primary-rgb) / 0.3) - 用构建时工具（PostCSS、Sass）在编译期展开：
rgb($primary-rgb / 0.3)，生成静态 CSS - 放弃变量抽象，直接在需要透明的地方写死
rgb(255 107 107 / 0.3)——简单项目最省事 - 禁用
/语法，退回到rgba(255, 107, 107, 0.3)，兼容性更好（IE9+）
最易被忽略的一点：所有“HEX 加透明度”的快捷方案（8 位 HEX、/ 语法、CSS Color Level 5）都依赖你先把原始 HEX 转成可计算的数值形式。没这一步，后面全是空谈。别信“一行代码搞定”的教程——那行代码背后，必然藏着一次隐式或显式的解析转换。
