最轻量可控的方式是拆解HSL为--hue、--sat、--lum-base三变量，用calc()派生明暗阶；HEX/RGB无法自动推导色阶，仅HSL支持明度线性调节，且需加边界控制与Safari兼容fallback。
直接用 --hue、--sat、--lum-base 三组基础变量 + calc() 派生明暗阶，是最轻量、最可控的方式。不需要预处理器，不依赖构建工具，浏览器原生支持，换主题色只需改两个值。
为什么不能只写 --color-primary: #3b82f6
单个 HEX 值无法派生出 --color-primary-100 到 --color-primary-900 的整套色阶。CSS 不会自动推导明度梯度，你写的变量只是“一个颜色”，不是“一个色彩系统”。后续要加浅色背景或深色文字时，只能手动补一堆新变量，维护成本指数级上升。
- HEX/RGB 是“快照”，HSL 才是“参数”——只有拆开色相、饱和度、明度，才能做数学运算
-
calc(var(--lum-base) + 20%)这类表达式必须基于 HSL，RGB 里没有可线性调节的明度通道 - 别在
:root里塞 20 个独立变量，结构混乱且无法批量更新
怎样用 HSL + calc() 安全派生色阶
核心是把明度（L）作为唯一可变参数，其他两个保持稳定。这样调色逻辑清晰，换主色时不会失真。
- 定义基础 HSL：
--hue-primary: 210、--sat-primary: 85%、--lum-primary-base: 55% - 浅色用
+ %：例如--color-primary-100: hsl(var(--hue-primary), var(--sat-primary), calc(var(--lum-primary-base) + 30%)) - 深色用
- %：例如--color-primary-700: hsl(var(--hue-primary), var(--sat-primary), calc(var(--lum-primary-base) - 15%)) - 务必加边界控制：明度不能低于 5% 或高于 95%，否则出现灰白不可读或纯黑无层次
旧 Safari 兼容怎么处理
Safari 15.4 之前不支持 hsl() 内嵌 calc()，直接写会失效，但 fallback 很简单——提前算好数值，用变量兜底。
立即学习“前端免费学习笔记（深入）”；
- 不要删掉
calc()版本，现代浏览器需要它保持动态性 - 为关键档位加静态 fallback：例如
--lum-primary-100: 85%，再写--color-primary-100: hsl(var(--hue-primary), var(--sat-primary), var(--lum-primary-100)) - 用
@supports区分更干净，但多数项目只需 fallback 变量已足够覆盖
命名和分层容易被忽略的细节
变量名不是随便加前缀就行。--primary-500 和 --color-primary-500 看似差别小，实际影响协作效率和工具链集成。
- 统一用
--color-开头，和设计系统对齐，也方便未来接入 color-mix() 或 oklch() - 强度数字严格对应 WCAG 可访问性建议：500 是标准文本色，100/50 是背景，700/900 是强调文字
- 避免用
--blue-500这类命名——它绑定具体色相，换成紫红主题时语义崩塌；--color-primary-500表达的是角色，不是物理颜色 - 如果同时管理多套主题（light/dark），别用
@media (prefers-color-scheme: dark)硬编码，而是在 JS 切换data-theme="dark"后重置同一组变量
