hsl()设饱和度为0%无法实现全站黑白灰，仅影响显式声明的css颜色；真正全覆盖需用filter: grayscale(1)，它穿透所有渲染层，但需注意兼容性与性能。
靠 hsl() 把饱和度设为 0% 无法实现真正的极简黑白灰——它只改你显式写的颜色，对图片、SVG、渐变、浏览器默认样式完全无效。
为什么 hsl(120, 0%, 50%) 不等于“全站黑白”
这个写法只是把某一个 CSS 属性值（比如 color 或 background-color）渲染成灰色。但页面里大量颜色根本不是你写的：
- 图片的
src、background-image、border-image不走 HSL 解析流程 - SVG 元素的
fill、stroke若没显式声明，会继承父级 color，而父级若本身是图片背景，就无 color 可继承 -
::before生成的内容若没设color，会继承，但继承链一旦断在非文本元素上，就失效 - input 的 placeholder 颜色、focus outline、滚动条、表单控件默认色——这些由 UA 样式控制，不响应你的
hsl()声明
hsl() 降饱和的合理使用场景
它适合局部、可控的颜色微调，比如设计系统中统一管理按钮文字、图标、边框等「你亲手声明的颜色」：
- 从原始色
#4a90e2转成hsl(210, 65%, 58%)，再压到hsl(210, 25%, 58%)实现柔和蓝 - 用 CSS 自定义属性绑定饱和度：
--s: 25%;，然后写color: hsl(var(--h), var(--s), var(--l)); - 注意数值越界风险：写
hsl(120, 120%, 50%)在 Chrome 当作100%，Firefox 可能直接回退到继承色；必须写0%～100%闭区间，且带%单位 - 别试图用
calc()动态缩放饱和度：hsl(var(--h), calc(var(--s) * 0.7), var(--l))会报错——CSS 不支持函数内运算
真正覆盖全页面的黑白灰，只靠 filter
唯一能穿透所有渲染层（HTML、Canvas、SVG、图片、渐变）的方案是 filter: grayscale(1)：
- 整站生效，加在
html上最稳：html { filter: grayscale(1); } - 用小数
1而非100%，方便后续 JS 动态插值：el.style.filter = `grayscale(${progress})` - 旧版 Safari（iOS 9.3 以下）和部分 Android 微信 X5 内核不支持，得用
@supports (filter: grayscale())包裹，或 fallback 到预处理的黑白 PNG - 慎用在
overflow-y: scroll容器内——Chrome 117+ 后可能触发额外合成层，导致滚动卡顿 - 单纯
grayscale(1)是去色，不是提对比；若要“有质感”的黑白灰，得叠加：filter: grayscale(1) contrast(180%) brightness(45%);，且必须写在同一行，拆开会导致抗锯齿模糊
真正容易被忽略的点在于：黑白灰不是“去掉颜色”就完事，而是要兼顾可读性、层次感和兼容性。用 hsl() 管理调色板，用 filter 控制呈现效果，二者分工明确，混用反而失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
