HSL是目前最可控、最易维护的主题色系统实现方式，因其色相、饱和度、亮度三者正交解耦，改一个参数不牵连其余；需规范定义CSS变量（如--s: 70%）、统一hsl()内全变量调用，并锁定色相以保障语义一致性。
适合，而且是目前最可控、最易维护的主题色系统实现方式。其他方案要么语义断裂，要么兼容失控。
为什么hsl()能低成本支撑整套主题系统
因为色相（hue）、饱和度（saturation）、亮度（lightness）三者正交解耦，改一个参数不牵连另外两个。比如：
-
--primary-h: 210锁定蓝调基底，所有衍生色（按钮、边框、文字）都复用它，换冷暖主色只改这一个数字 - 悬停态只需调
lightness：从60%→45%，视觉变深但不偏色 - 禁用态固定
hue和saturation，把lightness拉到30%左右，灰度自然、不发紫也不泛青 - 类比色/互补色直接 ±30° 或 ±180°，不用查表，心里有圆盘就能算
哪些写法在 Safari 里会静默失效
旧版 Safari（iOS 15 / macOS Monterey 及更早）对 hsl() 解析极严格，常见“颜色突然消失”问题几乎都源于变量定义或调用不规范：
-
--primary-s: "70%"❌ 带引号会被当字符串丢弃；必须写成--primary-s: 70%✅ -
hsl(var(--h), 70%, 60%)❌ 混用变量和字面量，Safari 可能 fallback 为透明；应统一为hsl(var(--h), var(--s), var(--l))✅ -
hsl(210, 70, 60)❌ 后两个参数缺%，整条声明被忽略；hsl(210, 70%, 60%)才合法 -
:root外定义变量（如.theme-dark { --h: 240 }）会导致非后代元素无法读取，全局主题必须从:root起手
什么时候不该只靠 hsl() 旋转 hue
不是所有语义色都能安全转色相。人眼对颜色的语义绑定强于数值逻辑：
立即学习“前端免费学习笔记（深入）”；
- 警告色
hsl(45, 100%, 55%)（金黄）转到hue: 135就成灰绿，失去“注意”信号 - 成功色
hsl(140, 80%, 50%)（鲜绿）转到hue: 230直接变蓝，用户认知断层 - 饱和度
时，<code>hue变化基本不可见；亮度或 <code>> 92%时，色相信息也严重压缩 - 用
hsl()做数据可视化渐变（如红→绿），线性插值hue会经过灰褐断层；这时该切lch()或分段控制
真正卡住人的从来不是语法，而是暗色模式下文字对比度跌破 4.5:1 却没报错，或者 iOS 15 用户看到的按钮是透明的——它不崩溃，只是“不存在”。
