用 hsl() 控制亮度和饱和度并配合语义化 css 变量联动，比硬写十六进制色更有效缓解视觉疲劳，因其能精准约束亮度在 10%–18%（正文）与 92%–98%（背景）的护眼区间，避免眩光、脏灰与渲染闪烁。
直接说结论：用 hsl() 控制亮度和饱和度，配合 background-color 与 color 的语义化变量联动，比硬写 #333 或 rgb(51,51,51) 更有效缓解视觉疲劳。
为什么纯色文字+纯色背景最容易导致眼酸
不是颜色“丑”，而是对比太生硬、亮度落差太大。比如 #000 配 #fff 表面达标，但实际在屏幕直射光下会引发眩光；#333 配 #f9f9f9 看似柔和，实测对比度常低于 4.5:1，尤其对中老年用户。
- 正文文字优先用
hsl(210, 12%, 18%)（比#333更深、更稳），而非#333或rgb(51,51,51) - 浅色背景别用
#ffffff，改用hsl(0, 0%, 97%)或#f8f8f8——减少全白反射 - 避免在长段落里反复切换高饱和色块（如
hsl(0, 100%, 50%)），饱和度超30%的色只用于按钮或图标等小面积强调
用 hsl() 动态约束亮度值的关键参数
hsl() 的第三个参数 lightness 直接决定明暗感知，但它不是线性亮度，而是人眼感知亮度。设错会导致“看着灰”或“看着刺”。
- 正文背景推荐
lightness: 97%–98%（如hsl(0, 0%, 97%)），比100%暗一点点，抗反光 - 正文文字用
lightness: 10%–18%，避开20%–30%这个易显“脏灰”的区间 - 深色模式下，别直接翻转为
hsl(0, 0%, 10%)，改用hsl(0, 0%, 12%)配hsl(0, 0%, 92%)——留出呼吸感 - 所有
hsl()值统一通过 CSS 变量管理：--text-primary: hsl(210, 12%, 18%)，禁止单独手写
rgba() 和 opacity 搭配时的可读性陷阱
很多人以为加 opacity: 0.8 就能“柔化”，结果是文字发虚、边缘模糊，长时间阅读更累。
- 优先用
rgba()控制背景透明度（如遮罩层rgba(0, 0, 0, 0.08)），而不是给文字加opacity - 辅助文本（如时间戳、标签）可用
color: hsl(210, 12%, 45%)+ 不加opacity，靠亮度差区分层级 - 禁用
opacity与渐变叠加（如linear-gradient(...) + opacity: 0.9），会引发渲染闪烁，尤其在 Safari 中 - 悬停反馈慎用
opacity动画，改用color微调（如从hsl(210, 12%, 18%)→hsl(210, 12%, 12%)）
prefers-color-scheme 切换时颜色崩塌的真实原因
不是没写 @media (prefers-color-scheme: dark)，而是变量没分域定义，或者用了不可逆的硬编码值（如 #000）。
- 必须把
--text-default和--bg-default分开定义在:root和@media块里，不能只覆盖其中一个 - 禁止在深色模式下使用
hsl(0, 0%, 0%)——它等于#000，在 OLED 屏上是纯黑发光点，极伤眼 - 测试时打开 Chrome DevTools → Rendering → Emulate CSS media feature
prefers-color-scheme，手动切两次，观察是否所有文字都重新渲染 - 图片背景上的文字，别依赖 JS 检测亮度，改用
background-image: linear-gradient(...), url(...)+color: var(--text-on-bg)预置两套变量
真正难的不是选哪个颜色函数，而是把亮度值卡在 10%–18% 和 92%–98% 这两个窄区间里，并让所有组件共享同一套约束逻辑。一旦放开这个边界，再 fancy 的渐变或动画都会加速视觉疲劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
