--color-primary仅存十六进制虽可静态渲染，但无法动态调整透明度、适配深色模式或拆解为RGB/HSL分量；真正可维护方案是语义化命名+RGB或HSL拆解变量，兼顾兼容性与扩展性。
--color-primary 可以直接存 #2563eb，但仅限“静态使用”；一旦需要动态改透明度、适配深色模式或复用为 RGB/HSL 分量，硬存十六进制就会卡死——这不是语法错误，而是后续扩展能力归零。
为什么不能只靠 --color-primary: #2563eb 一招鲜？
你写 --color-primary: #2563eb 没问题，color: var(--color-primary) 也能正常渲染。但问题出在“下一步”：
- 想给按钮加半透背景？
background: rgba(var(--color-primary), 0.6)会报错——rgba()不接受十六进制字符串 - 深色模式下要微调饱和度？
color: hsl(from var(--color-primary) h s l / 0.9)在 Safari 和旧 Edge 中不支持from语法 - 设计师改了主色，你得手动把
#2563eb拆成 RGB 值再更新三四个变量？那不如放弃变量
真正可维护的写法：语义命名 + RGB/HSL 拆解
别把颜色当“值”存，当“设计意图”存。推荐两种落地路径：
-
RGB 路径（兼容性最强）：
:root { --primary-r: 37; --primary-g: 99; --primary-b: 235; --primary-alpha: 1; }
用时：color: rgb(var(--primary-r), var(--primary-g), var(--primary-b));
带透：background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha)); -
HSL 路径（更易调色）：
已知主色是hsl(224, 82%, 53%)，就存：--primary-h: 224; --primary-s: 82%; --primary-l: 53%; --primary-alpha: 1;
用时：color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-alpha));
注意：--primary-s 和 --primary-l 必须带 % 单位，否则 hsla() 解析失败；--primary-alpha 必须是 0–1 小数，不是百分比。
Safari 对 #rrggbbaa 的支持现状（2026 年中）
截至 macOS 14.5 和 iOS 17.5，Safari 仍不识别八位十六进制格式 #2563eb80。你写进去它不会报错，但用在 background-color 或 color 上时，多数情况渲染为黑色或 fallback 到 initial 值。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Firefox / Edge：支持
#rrggbbaa和#rgba，可放心用 - Safari：只认
rgb()、rgba()、hsl()、hsla()—— 所以拆分变量不是“过度设计”，是 Safari 兼容刚需 - 如果项目明确不支持 Safari（比如内部管理后台），
--color-primary: #2563eb80确实能省事，但得在文档里写死这条限制
如何从现有十六进制自动转出 RGB 变量？
手动算 #2563eb → r=37,g=99,b=235 太容易出错。三个实用方案：
- 在线工具：搜索 “hex to rgb css variables”，粘贴
#2563eb，一键生成--r: 37; --g: 99; --b: 235 - VS Code 插件：Color Highlight + Color Picker，点一下颜色就能复制 RGB 值
- 构建时自动化：用 PostCSS 插件
postcss-css-variables或自定义脚本，在build阶段把--color-primary: #2563eb预编译成对应 RGB 变量，避免 runtime 计算
真正容易被忽略的是 alpha 值的单位混用：同一套主题里，--alpha-60 必须始终代表 0.6，而不是有时写 60%、有时写 0.6——这会导致 calc() 计算失效、媒体查询覆盖异常，且调试时根本看不出哪条规则赢了。
