hsl()饱和度参数必须带%单位，70或0.7均无效导致整条声明被忽略；正确写法为hsl(200, 70%, 60%)，css变量中--sat也须含%，且calc()不能用于hsl()参数。

hsl() 饱和度参数无效，基本等于整条颜色声明被浏览器忽略——你看到的不是“颜色变灰”，而是退成继承色、透明或默认文本色。这不是渲染异常，是语法直接失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么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() 字面量。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！