十六进制颜色是css解析后的类型值，非普通字符串；js中操作需先校验格式、解构分量再重组，避免正则误替、位数误判及精度丢失，否则样式静默失效。
十六进制颜色不是字符串，是CSS值类型
你在JS里拿到 element.style.color 是 "#ff6b35" 这样的字符串，但CSS引擎内部根本不把它当字符串处理——它是解析后的 <color></color> 类型值。一旦你用JS拼接、截取、替换其中的字符（比如 colorStr.replace('f', 'a')），得到的只是普通字符串，浏览器不会自动把它“转回”合法颜色值。
常见错误现象：改完后赋给 style.color，控制台没报错，但样式静默失效（开发者工具里该属性被划掉）。
- JS中操作前必须先确认它确实是十六进制格式（以
#开头、长度为 3 或 6 或 8） - 3位简写（如
#abc）不能直接按字符索引改——#abc实际等价于#aabbcc，改第一个a会影响红通道两位 - 8位写法（如
#ff6b3580）的后两位是 alpha，单独提取或修改时容易误判位数
无法直接正则替换RGB通道值
想把 #ff6b35 的红色通道从 ff 改成 aa？别用 replace(/ff/, 'aa') ——它会匹配所有 ff，比如在绿色部分 6b 里没有，但在 #feed 里可能把 ee 当成红色通道误改。
真正安全的做法是先解构成 R/G/B 分量，再重组：
function hexToRgb(hex) {
const clean = hex.replace(/^#/, '');
const len = clean.length;
if (len === 3) return [clean[0]+clean[0], clean[1]+clean[1], clean[2]+clean[2]];
if (len === 6) return [clean.slice(0,2), clean.slice(2,4), clean.slice(4,6)];
throw new Error('Invalid hex');
}
注意：不支持带 alpha 的 8 位写法直接解构；#ff6b3580 必须手动切分前6位和后2位。
CSS变量里存十六进制值，JS读写有陷阱
定义 :root { --primary: #3b82f6; } 后，getComputedStyle(document.documentElement).getPropertyValue('--primary') 返回的是 "#3b82f6"（带 # 的字符串），但如果你 JS 里写 element.style.color = '--primary'，它就真成了字面量字符串，不是颜色。
必须用 var(--primary) 形式，且只能在 CSS 层生效；JS 中要动态改颜色，得先读出值，再计算，最后写回变量或直接设 style：
- 读：
getComputedStyle(el).color返回的是 rgb() 格式（如"rgb(59, 130, 246)"），不是原始十六进制 - 写：
el.style.setProperty('--primary', '#ef4444')可以，但改完不会自动刷新依赖它的color: var(--primary)元素——它们已计算完毕，除非触发重绘 - 动画/过渡对 CSS 变量里的颜色无效，
transition: --primary不工作
十六进制与RGB/HSL混用时解析不可逆
浏览器把 #ff6b35 解析成 RGB 值后，内部不再保留原始格式。你用 JS 读 getComputedStyle(el).color，永远拿不到 #ff6b35，只拿到 rgb(255, 107, 53)。反过来，rgb(255,107,53) 转十六进制看似简单，但存在精度丢失风险：
- HSL 值转 HEX 更危险，比如
hsl(12, 100%, 50%)理论上是纯橙，但不同浏览器四舍五入后可能生成#ff6600或#ff6500 - 设计师给的
#2a66c7，如果 JS 里先转成 HSL 再转回 HEX，可能变成#2a67c7——差一位在低分辨率屏上就能看出色块 - 不要依赖
parseInt('ff', 16)直接算，得补零（'f'→'0f'），否则#f35解构会错乱
最麻烦的是：这些转换全在运行时发生，出错时既不报错也不警告，只静默渲染失败。盯住开发者工具 Styles 面板里那条带删除线的 color 声明，比查文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
