hsl()饱和度参数必须带%单位，70或0.7均无效导致整条声明被忽略；正确写法为hsl(200, 70%, 60%)，CSS变量中--sat也须含%，且calc()不能用于hsl()参数。
hsl() 饱和度参数无效，基本等于整条颜色声明被浏览器忽略——你看到的不是“颜色变灰”，而是退成继承色、透明或默认文本色。这不是渲染异常，是语法直接失效。
为什么hsl()第二个参数写70或0.7就失效
浏览器只认带 % 单位的饱和度值，70 和 0.7 都不合法，会被整条丢弃。常见错误包括：
-
color: hsl(200, 70, 60%)→ 缺%，无效 -
color: hsl(200, 0.7, 60%)→ 小数不支持，无效 -
color: hsl(200, 70%, 60)→ 第三个参数也缺%，同样无效
hsl(200, 70%, 60%)、hsl(0, 100%, 50%)、hsl(120, 0%, 50%)。DevTools 的 Styles 面板里，无效行会带删除线，Computed 标签页查不到该属性。
用 CSS 变量控制饱和度时var(--sat)必须自带%
--sat: 70 是错的；--sat: 70% 才对。变量本身必须含单位，否则 hsl(var(--h), var(--sat), var(--l)) 中的 var(--sat) 展开后仍是 70，照样失效。
- ✅ 正确：
:root { --sat: 65%; }+color: hsl(210, var(--sat), 58%); - ❌ 错误：
:root { --sat: 65; }+color: hsl(210, calc(var(--sat) * 1%), 58%);——calc()在这里不解决单位缺失问题，且calc()不能用于hsl()参数中（语法不允许）
.btn:disabled { --sat: 15%; }，前提是 --sat 初始值已带 %。
saturate()滤镜和hsl()饱和度参数别混用
filter: saturate(1.3) 是像素级后处理，作用于整个元素渲染结果；hsl(200, 70%, 60%) 是定义颜色本体。两者逻辑层级不同：
- 在同一个元素上同时用
color: hsl(200, 70%, 60%)和filter: saturate(1.5)→ 可能过饱和、发飘，尤其蓝/紫系在暗背景下容易裁切失真 -
color: hsl(200, saturate(70%, 20%), 60%)→ ❌ 语法错误，CSS 不支持函数嵌套 -
saturate()不影响getComputedStyle(el).color返回值，无法用于 JS 逻辑判断
真正难的不是写出 hsl(210, 65%, 58%)，而是让所有地方的饱和度变更都走同一套变量逻辑——否则设计师说“禁用态再灰一点”，前端得手动翻 17 个文件改 hsl() 字面量。
