直接改--sat变量可批量调饱和度，但需所有颜色用hsl(var(--hue),var(--sat),var(--light))声明；漏写rgb/十六进制色、伪元素、SVG fill或第三方库未映射CSS变量均失效；须用clamp()限制--sat范围防溢出；filter:saturate()影响文字和图片渲染；深色模式下需同步调整--light以保可读性。
直接改--sat变量就能批量调饱和度，但必须提前用hsl()声明所有颜色
只在:root里定义--sat: 70%没用，除非你所有color、background、border-color等都写成hsl(var(--hue), var(--sat), var(--light))。漏掉一个rgb(52, 152, 219)或#3498db，它就不会响应变化。
常见遗漏点：
-
::before/::after里的background和color没换成var(--sat) - SVG 图标的
fill属性仍写死#3b82f6，需显式加fill: var(--primary-color) - 第三方 UI 库（如 Ant Design）默认不读你的 CSS 变量，得查文档看是否支持
--ant-primary-color这类映射
用clamp()安全控制饱和度范围，避免视觉崩坏
直接写--sat: calc(var(--sat) + 20%)可能超 100%，导致颜色发虚或边缘溢色；写calc(var(--sat) - 40%)又可能低于 0%，浏览器会静默截断为 0%——结果全灰，失去色相辨识度。
正确做法是用clamp()兜底：
立即学习“前端免费学习笔记（深入）”；
button:hover {
--sat: clamp(10%, calc(var(--sat) + 15%), 95%);
}这样既能提鲜，又不会让按钮在悬停时突然“过曝”或“褪色到看不出原色”。
filter: saturate()能快速全局调整，但会影响图片和文字渲染
如果只是临时预览或做滤镜式主题切换，body { filter: saturate(1.3); }确实一行生效。但它不是重绘颜色，而是对已渲染像素做后处理，副作用明显：
- 小字号文字抗锯齿劣化，尤其 macOS 上容易发虚
- 原本的中性灰（如
#ccc）经saturate(1.5)后会意外带色，破坏视觉中立性 - 和
backdrop-filter、opacity叠加时行为不可预测，Chrome 和 Safari 渲染结果可能不一致
真要局部控饱和度，建议只作用于纯色层（比如伪元素覆盖层），别套在含图片/文字的容器上。
深色模式下别只调--sat，亮度--light必须同步降
单纯把--sat从 70% 提到 85% 做“高对比”，在深色背景上反而会让文字更难读——高饱和+低亮度组合容易产生眩光感。实际应配合降低--light值：
.high-contrast {
--sat: 90%;
--light: 20%; /* 同步压暗，保持可读性 */
--light-accent: 95%; /* 按钮等关键元素单独提亮 */
}真正棘手的不是怎么调参数，而是不同亮度区间下人眼对饱和度的感知非线性——同一--sat值，在--light: 90%和--light: 20%下看起来完全不是一回事。得靠真实设备肉眼校验，别信 DevTools 颜色拾取器显示的数值。
