真正有效的做法是将饱和度控制在10%–30%区间并联动亮度分层约束；主文字用hsl(210,12%,18%)，浅色背景用hsl(30,12%,94%)，按钮改hsl(210,50%,48%)，css变量需用clamp()设边界，且须在真实设备上验证长文阅读舒适度。
直接调低饱和度不能缓解视觉疲劳，反而容易让页面发灰、失焦；真正有效的做法是把饱和度控制在 10%–30% 区间，并配合亮度（lightness）分层约束，尤其避开正文区域的高饱和色块。
为什么单纯降饱和度反而加重眼酸
人眼对“柔和感”的判断不只看饱和度，更依赖饱和度与亮度的组合关系。常见错误包括：
-
hsl(210, 0%, 50%)看似安全，但它是纯灰，缺乏色彩锚点，长段落阅读时易导致视觉漂移 -
hsl(0, 10%, 95%)这类高亮+低饱色，在 OLED 屏上会泛白边，干扰文字边缘锐度 - 把所有颜色统一设为
var(--sat: 15%)，却不区分背景、文字、按钮——结果按钮没存在感，状态提示又看不清
正文区域的饱和度必须和亮度联动
正文不是越灰越好，而是要保留轻微色相引导，同时压制攻击性。关键参数组合如下：
- 主文字：用
hsl(210, 12%, 18%)，不是为了“蓝”，而是借微量色相避免纯灰疲劳；饱和度卡在12%是实测临界值——再低就显脏，再高就微刺 - 浅色背景：用
hsl(0, 0%, 97%)或hsl(30, 12%, 94%)，后者带极淡橙相，比纯白底更稳，且12%饱和度刚好提供环境光暗示，不抢正文 - 禁用态/次要文本：别用
hsl(210, 0%, 60%)，改用hsl(210, 8%, 62%)——留一点饱和度维持色相连续性，防止突然断层
按钮和强调元素的饱和度要“有节制地提”
高饱和色只允许小面积使用，且必须同步压亮度防辉光：
- 主按钮：从默认
hsl(210, 70%, 60%)改为hsl(210, 50%, 48%)，饱和度降20%，亮度同步降12%，视觉重量不变但无眩光 - 警告色（如橙）：不用
hsl(30, 100%, 50%)，改用hsl(30, 65%, 55%)，饱和度控制在65%是暖色安全上限，再高易引发焦躁感 - 悬停态：饱和度可 +
5%～8%，但必须搭配lightness+2%～3%，否则会像“突然亮一下”，打断阅读节奏
用 CSS 变量统一控饱和度，但别让它失控
全局变量确实方便，但必须加边界防护，否则一个 calc() 写错就全站发灰：
- 定义时用
clamp()：比如--sat-primary: clamp(8%, calc(var(--base-sat) + 10%), 65%)，确保不会掉进0%或冲过70% - 深色模式下必须同步调低
--light：例如--sat-primary: 45%对应--light-primary: 22%，高饱和配低亮度才能稳住不发光 - 图片、SVG、第三方组件不响应 HSL 变量——别指望靠改
--sat让 banner 图变柔和，那是filter: saturate(0.8)的事，且得单独包裹容器
最容易被忽略的是：饱和度不是独立调节项，它永远在和亮度做动态博弈。同一 hsl() 值在浅底和深底上，人眼感知的“柔和度”可能差一倍——调试时一定要在真实设备上滚动长文段，以“读三分钟不抬眼”为唯一验收标准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
