纯 css 无法动态解析十六进制颜色字符串为 rgb 数值，必须依赖 js 解析后注入 css 自定义属性，并设置默认值确保容错。
纯 CSS 无法优雅地将十六进制颜色字符串（如 #ff6b35）动态转为 rgb() 中可用的独立 R/G/B 数值——这不是“不够优雅”，而是根本做不到。
color-mix() 和 color() 函数不能解析 hex 字符串
CSS 的 color-mix()、color() 等新函数只接受已解析的颜色值（如 red、hsl(120 50% 50%) 或变量 var(--c)），不支持运行时解析字符串。传入 #ff6b35 会直接报错或被忽略，浏览器不会尝试拆解它。
-
color-mix(in srgb, #ff6b35 50%, white 50%)→ 语法错误（#ff6b35不是合法颜色参数） -
color(display-p3, #ff6b35)→ 同样无效；CSS 不做字符串 tokenization - 所有试图用
attr()、content或伪元素“提取” hex 值的操作，都绕不开 JS 参与
JS 解析 hex → 注入 CSS 变量是最小可行路径
真正可落地的做法是：用 JS 读取 hex 值 → 计算 R/G/B → 写入 :root 或目标元素的自定义属性 → 在 CSS 中引用。关键在于解析逻辑是否健壮：
- 必须兼容
#rgb和#rrggbb两种格式：用hex.replace(/^#/, '')去掉#，再判断长度为 3 还是 6 - 简写格式
#abc要展开为#aabbcc，不能靠parseInt("a", 16) * 17这类位运算（易出错且难维护） - 推荐写法：
const h = hex.length === 4 ? hex.slice(1).split('').map(c => c + c).join('') : hex.slice(1) - 然后用
parseInt(h.slice(0,2), 16)等分别取 R/G/B，避免parseInt("fff", 16) === 4095这种陷阱
必须提供 fallback，否则变量未定义时样式崩溃
CSS 自定义属性是级联的，但 JS 注入有延迟；若 JS 执行失败或未运行，var(--r) 会回退为初始值（通常是 unset），导致 rgb(var(--r), ...) 整个声明失效。
- 务必为每个变量设默认值：
--r: 0; --g: 0; --b: 0;（写在:root或元素上） - 更稳妥的是在 CSS 中用
rgb(var(--r, 0), var(--g, 0), var(--b, 0))显式 fallback - 如果 hex 来自用户输入或外部 API，JS 层也要加校验：
/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(hex)
真正的复杂点不在转换公式，而在于时机和容错：JS 必须在 CSS 使用变量前执行；变量名需约定清晰（比如统一用 --color-r 而非 --r 避免冲突）；服务端渲染场景下还得考虑 hydration 同步问题——这些细节比算法本身更容易让效果“看起来没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
