css变量更适合存rgb或hsl而非hex，因hex是纯字符串无法参与calc()计算、明度调整或js通道操作；而rgb/hsl可拆解为带单位的数值变量，支持动态组合、主题切换与深色模式适配。
CSS自定义属性更适合存 RGB（含 rgba）或 HSL（含 hsla），而不是 HEX。 因为 HEX 在变量中是纯字符串，无法参与计算、叠加、明度调整等操作；而 RGB/HSL 可拆解为数值型 CSS 变量，配合 calc() 和函数式语法真正实现“可编程颜色”。
为什么 HEX 存进 --color 就废了
你写 --main-color: #FF5733; 看似没问题，但后续想“变暗 20%”或“加 30% 透明度”，CSS 没法解析十六进制字符串。浏览器不支持 calc(#FF5733 * 0.8) 这种写法——整条声明会直接失效。所有基于该变量的 background-color: var(--main-color); 能用，但任何动态衍生色都得另起炉灶，维护成本陡增。
- HEX 变量只能当“静态占位符”，不能被 JS 读取通道值（
getComputedStyle返回的是rgb()或rgba()） - 设计系统里做深色模式切换时，HEX 无法和
color-mix()、color-contrast()等新特性配合 - PostCSS、Tailwind 等工具链默认输出 RGB/HSL 格式，HEX 变量反而要额外转换
推荐存 RGB 数值分量：红、绿、蓝各一个变量
把颜色拆成三个数值变量，再用 rgb(var(--r), var(--g), var(--b)) 组合，既能保持语义清晰，又支持运行时修改：
:root {
--r: 255;
--g: 87;
--b: 51;
--alpha: 0.9;
}
.btn {
background-color: rgba(var(--r), var(--g), var(--b), var(--alpha));
/* 后续可直接改 --r 或 --alpha，无需重写整条颜色 */
}
- JS 修改只需
el.style.setProperty('--r', '200')，比字符串替换#FF5733安全得多 - 配合
calc()做亮度微调：background-color: rgb(calc(var(--r) * 0.8), calc(var(--g) * 0.8), calc(var(--b) * 0.8)); - IE9+ 全面支持，无兼容性风险
渐变、遮罩、主题系统必须用 RGB/HSL
涉及透明度、颜色过渡或动态计算的场景，HEX 根本不可行。比如写一个从主色到半透黑的遮罩层：
.overlay {
background: linear-gradient(
to bottom,
rgba(var(--r), var(--g), var(--b), 0.8),
rgba(0, 0, 0, 0.4)
);
}
-
rgba()是 IE9+ 事实标准，#RRGGBBAA在 iOS Safari 15.4 之前完全不认，VS Code 插件还常标红 - HSL 更适合主题系统：
--hue: 200; --sat: 90%; --light: 60%;→hsl(var(--hue), var(--sat), calc(var(--light) - 10%)) - Canvas、SVG fill、filter 颜色动画等底层 API 接收的也是 RGB/HSL，HEX 得先转
真正难的不是选格式，而是把颜色从“设计稿里的一个字符串”变成“可被代码理解的一组数值”。HEX 适合交付、评审、静态样式；一旦进入变量体系，就该交棒给 RGB 或 HSL —— 否则后面所有颜色逻辑都会卡在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
