CSS变量应存RGB三通道数值，用rgb()函数组合使用；动态修改时通过setProperty更新单个分量，rgba()需单独定义alpha变量（0–1范围）；RGB比HSL更直观可控且兼容性更好。
怎么用 CSS 变量存 RGB 颜色值
CSS 变量不能直接存「颜色关键词」或「十六进制」然后在 color 里直接引用，但可以存 RGB 的三个数值，再用 rgb() 函数组合出来。这样修改单个通道（比如只调亮红色）就非常灵活。
关键点：变量名要语义清晰，且必须用 rgb() 显式拼接，浏览器不会自动把变量转成颜色。
- 正确写法：
:root { --main-r: 255; --main-g: 99; --main-b: 71; }，然后color: rgb(var(--main-r), var(--main-g), var(--main-b)); - 错误写法：
color: var(--main-color);（如果--main-color是字符串"255, 99, 71"，rgb()不会解析它） - 不推荐存整条
rgb(255, 99, 71)字符串——后续无法用 JS 单独改某个分量
JS 动态改 RGB 分量要注意什么
用 element.style.setProperty() 改单个变量即可，不需要重设整个颜色。但注意：数值类型必须是数字或字符串数字，不能是浮点数（除非你真需要小数精度，但多数场景整数足够）。
- 安全写法：
el.style.setProperty('--main-r', '200');或el.style.setProperty('--main-r', 200); - 危险写法：
el.style.setProperty('--main-r', 200.5);——某些旧版 Safari 对非整数 RGB 分量渲染异常 - 批量更新建议用
el.style.cssText += '--main-r: 200; --main-g: 120;'，避免多次重排
rgba() 透明度怎么配合变量动态控制
透明度（alpha）不能塞进 rgb()，得换用 rgba()，且 alpha 必须是 0–1 范围的数字（不是百分比）。所以单独定义 --alpha 变量最稳妥。
立即学习“前端免费学习笔记（深入）”；
- 定义：
:root { --main-r: 255; --main-g: 99; --main-b: 71; --alpha: 0.8; } - 使用：
background-color: rgba(var(--main-r), var(--main-g), var(--main-b), var(--alpha)); - JS 修改：
el.style.setProperty('--alpha', 0.3);——注意这里必须用小数，"30%"或30都无效 - 兼容性提醒：IE 完全不支持 CSS 变量，
rgba()倒是 IE9+ 就支持了
为什么不用 HSL 而坚持用 RGB + 变量
HSL 看起来更“语义化”（比如 --hue: 120），但实际动态调整时容易出视觉偏差：饱和度（s）和亮度（l）不是线性感知，微调 --lightness: 60% → 62% 在深色背景下可能几乎看不出变化，而 RGB 的 --main-b: 100 → 120 更可控。
- RGB 分量直觉强：想变蓝？加
--main-b；想变灰？让三者接近 - HSL 的
hsl()函数虽也支持变量，但浏览器对hsl(var(--h), var(--s), var(--l))的解析稳定性略低于rgb()（尤其在动画中） - 设计系统若需对接 Sketch/Figma 插件或后端配色 API，它们返回的多是 RGB 元组，省去转换步骤
真正麻烦的是跨组件复用变量时作用域管理——别在多个 :root 里重复定义同名变量，也别忘了用 !important 会破坏变量继承链。这些细节比语法本身更容易导致颜色“改了但没生效”。
