纯CSS无法动态转换HEX→RGB，必须依赖JS或构建时预处理；浏览器不支持hex-to-rgb()等运行时解析函数，getComputedStyle()返回值不可逆且丢失原始透明度信息。
不能在纯CSS中做动态HEX→RGB转换——CSS本身没有运行时解析十六进制字符串的能力，所谓“动态”必须靠JS介入或构建阶段预处理。
浏览器不支持 hex-to-rgb() 这类CSS函数
CSS规范里没有hex-to-rgb()、parse-hex()或类似运行时解析函数。你写的#10EBE4在浏览器渲染管线里确实会被内部转成RGB值，但这个过程对开发者不可见、不可读取、不可复用。试图用getComputedStyle(el).color反推原始HEX是靠不住的：它只返回最终计算值（如rgb(16, 235, 228)），且无法还原透明度信息（#10EBE4CC会变成rgba(16, 235, 228, 0.8)，但你拿不到CC）。
常见错误现象：
- 写
background-color: hex-to-rgb(#10EBE4);→ 浏览器直接忽略整条声明，不报错也不生效 - 用
style.setProperty('--rgb', hexToRgb('#10EBE4'))再在CSS里background-color: var(--rgb)→ 实际传的是字符串"rgb(16,235,228)"，但CSS变量不自动解析字符串为颜色值，结果常是黑色或透明
hexToRgb() 函数必须先处理简写和非法输入
直接parseInt(hex.slice(1,3), 16)会挂掉所有三字符简写（如#f00）和无#输入（如ff0000）。更糟的是，它对#ggg、#1234、带空格的#10EBE4 完全没防护。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 先
hex.trim()—— 设计师粘贴的HEX常带不可见Unicode空格或全角符号 - 用正则
/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i匹配，拒绝#abc（三字符）和#12345（五位）这类非法输入 - 对三字符输入（
#abc）必须展开为#aabbcc，不能简单重复第一位 - 返回对象结构建议用
{ r: 16, g: 235, b: 228 }，别拼"rgb(16,235,228)"字符串——后者没法参与后续数学运算（比如调亮/调暗）
需要透明度时，别硬塞#RRGGBBAA到hexToRgb()
8位HEX（如#10EBE4CC）不是标准，浏览器支持不一：Safari 17.4+、Chrome 119+能识别，但Electron旧版、微信小程序WebView、部分Android UC内核会直接当无效色丢弃，渲染成rgb(16,235,228)（即不透明）。
真正要支持动态alpha，推荐两条路：
- 固定透明度：用PostCSS插件（如
postcss-color-function），写color(#10EBE4 a(80%))，编译后生成标准rgba() - 运行时可变：JS里拆出RGB三通道后，单独传
alpha参数，最后拼rgba(${r}, ${g}, ${b}, ${alpha})，别试图从HEX字符串里硬挖后两位
如果坚持用8位HEX输入，校验逻辑得升级：/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i，且第四组要parseInt(..., 16) / 255，不是除以100。
调试时别信el.style.color，用getComputedStyle()
el.style.color只读内联样式，且返回原始字符串（如"#10EBE4"），毫无帮助。getComputedStyle(el).backgroundColor才返回浏览器最终计算值，但注意：
- 它返回的是
rgb()或rgba()字符串，不是数组，需二次解析才能用于计算 - 若元素未渲染（display: none、未挂载）、或父级有
opacity: 0，返回值可能是transparent或空字符串，不是转换逻辑问题 - 验证转换是否正确，最稳方式是：JS里算出
{r,g,b}→ 写入el.style.backgroundColor = `rgb(${r},${g},${b})`→ 立刻查getComputedStyle(el).backgroundColor是否匹配
最容易被忽略的点：设计师给的#10EBE4CC在Figma里看着准，粘贴到代码里可能带零宽空格（U+200B），.trim()能清掉普通空格，但清不掉这个——得用hex.replace(/[\u200B-\u200D\uFEFF]/g, '')。
