不能直接为HEX颜色动态追加透明度，因CSS不支持#ff6b6b/0.3或color(from #ff6b6b)等语法；合法方案仅有两种：8位HEX（如#ff6b6b80）或RGB/HSL+/语法（如rgb(255 107 107 / 0.3)）。
不能直接为 HEX 颜色动态追加透明度通道——CSS 不支持任何运行时解析 #ff6b6b 并“注入” alpha 的语法，包括 color(from #ff6b6b / 0.3)、rgba(var(--color), 0.3) 或 var(--color) / 0.3，这些全部无效或未实现。
为什么 #ff6b6b / 0.3 和 color(from #ff6b6b) 都不工作
CSS 的 / 透明度语法只接受函数式颜色模型（如 rgb()、hsl()），不接受十六进制字面量；写成 color: #ff6b6b / 0.3 会被整条忽略，无报错、无提示。而 color(display-p3 #ff6b6b / 0.3) 是语法错误：color() 函数要求第一个参数是颜色空间名后紧跟括号内参数，不能接 HEX 字符串。W3C Color Level 5 提出的相对颜色能力（如 color(from red a + 0.2)）目前无任何主流浏览器实现，连实验性 flag 都未启用。
真正可用的两种合法路径
你只有两个经实测全兼容（Chrome 111+、Firefox 114+、Safari 16.4+）、无需 polyfill 的方案：
-
8位 HEX：
#rrggbbaa—— 把#ff6b6b手动补两位 alpha，如#ff6b6b80（50% 不透明）。注意：必须严格 8 字符、小写、无空格/引号；AA是十六进制值（00= 全透，ff= 全不透），不是百分比。 -
RGB/HSL +
/语法：rgb(255 107 107 / 0.3)或hsl(0 70% 60% / 0.3)—— 需先将 HEX 拆解为数值。推荐用浏览器开发者工具拾色器直接读 HSL 值，比手算 RGB 再转更稳；HSL 对主题变体也更友好。
CSS 变量场景下如何“保持 HEX 不变”又用上透明度
如果你定义了 --primary: #ff6b6b，且其他地方依赖它输出纯色（如边框、文字），就不能改它本身。此时必须拆分存储：
立即学习“前端免费学习笔记（深入）”；
- 新增一个基础变量存 RGB 分量：
--primary-rgb: 255, 107, 107 - 用它重建原变量：
--primary: rgb(var(--primary-rgb))（保证旧用法不变） - 透明背景时写：
background: rgb(var(--primary-rgb) / 0.3)或background: rgba(var(--primary-rgb), 0.3)
别试图用 rgba(var(--primary), 0.3)——var(--primary) 解析出来是字符串 "#ff6b6b"，rgba() 完全无法识别。
容易被忽略的细节
八位 HEX 的 AA 是**不透明度**，不是“透明度”。#00000080 表示约 50.2% 不透明（即 49.8% 透明），不是“50% 透明”。想精确控制，得换算：0.5 × 255 = 127.5 → 127 → 0x7f，所以 #0000007f 才更接近真·50% 透明。而 rgb(0 0 0 / 0.5) 就是严格 50% 透明，无需换算——这也是为什么函数式写法在需要精确 alpha 时更可靠。
