hsl()饱和度参数必须带%单位，写成70或0.7均失效；s=0%时恒为灰阶色，适合禁用态；用css变量绑定--sat并确保其值含%，可实现批量动态控制。
直接改 hsl() 的第二个参数（饱和度）就能控制颜色“艳”还是“灰”，但写错单位或数值范围，整条声明就失效——你看到的不是变灰，而是退成透明或继承色。
hsl() 饱和度参数必须带 % 单位
浏览器只认 70% 这种写法，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%)（后者是纯灰）。
饱和度为 0% 时，色相和亮度无关紧要
只要 s 是 0%，无论 h 是多少、l 是多少，结果都是灰阶色：
-
hsl(0, 0%, 30%)→ 暗灰 -
hsl(180, 0%, 90%)→ 亮灰 -
hsl(240, 0%, 50%)→ 中灰，等价于gray
这个特性适合做禁用态：保持原 h 和 l，只把 s 降到 10%～20%，视觉上弱化但不丢失色调归属。
用 CSS 自定义属性批量控制饱和度
手动改每个 hsl() 不现实，用变量绑定饱和度值才可控：
body {
--hue: 210;
--sat: 65%;
--light: 58%;
}
.btn { color: hsl(var(--hue), var(--sat), var(--light)); }
.btn:disabled { --sat: 15%; }
这样禁用时只需改一个变量，所有引用该变量的地方同步响应。注意：var(--sat) 必须本身带 %（如 --sat: 15%），不能写成 --sat: 15，否则计算后仍是无效值。
别把 saturate() 函数和 hsl() 饱和度混用
saturate() 是 SCSS 编译期函数，输出的是固定颜色值；hsl() 的 s 参数是运行时解析的 CSS 值。两者完全不互通：
-
saturate(hsl(200, 30%, 60%), 20%)→ 合法，编译后变成某个#xxxxxx -
color: hsl(200, saturate(30%, 20%), 60%)→ ❌ 语法错误，CSS 不支持函数嵌套 - 在同一个元素上既用
hsl()又加filter: saturate(1.2)→ 双重处理，容易过饱和或发灰
真正难的不是调出某个柔和色，而是让整个系统里所有“降饱和”行为都走同一套变量逻辑——否则设计师改一次主题，前端得手动翻 20 个文件找 hsl()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
