暗色模式下hsl()刺眼主因是l%未适配暗背景，应优先降低l%（如50%→25%），再微调s%，避免高饱和纯色叠加透明度；l%变化≤10%可缓解刺眼，其影响大于s%调整。
暗色模式下 hsl() 色值为什么反而更刺眼
直接把亮色背景下的 hsl(200, 100%, 50%) 搬到暗色背景上，饱和度没变、亮度也没适配，人眼对高饱和蓝在深灰背景上极其敏感——这不是颜色错了，是 HSL 的 % 值参照系没切换。
-
hsl(h, s%, l%)的l%是相对全白到全黑的线性明度，不是“看起来多亮” - 同样
l: 50%在暗背景下实际对比度可能高达 15:1，远超 WCAG 推荐的 4.5:1 文字对比度上限 - 人眼在暗环境瞳孔放大，对饱和色的色散效应增强，
s: 100%的纯色会“发虚”“跳出来”
用 hsl() 降低刺眼感的实操调整顺序
别先调 s%，优先压 l% 再微调 s%，让颜色“沉下去”而不是“淡下去”：
- 文字/图标色：把原
l%从 50% → 降为 20%~30%，再把s%同步降到 30%~50%（例如hsl(200, 40%, 25%)） - 强调色/按钮色：保留一点
h%辨识度，但l%不超过 40%，s%控制在 60% 以内（例如hsl(12, 55%, 38%)） - 避免用
l: 0%（纯黑）或l: 100%（纯白）作主色，它们在暗模式里缺乏层次，易造成视觉疲劳
hsl() 和 hsla() 在暗色主题里的透明度陷阱
加 a（alpha）看似能柔化，但实际常让颜色更脏、更难读：
-
hsla(200, 100%, 50%, 0.8)= 高饱和蓝叠在深灰背景上 → 产生光学振动，尤其小字号时边缘模糊 - 真正有效的降刺眼方式是改
l%和s%，不是靠透明度“稀释”——透明度本质是混合，不是降饱和 - 如果必须用透明，优先选
l%已压低的基色（如hsla(200, 40%, 25%, 0.9)），而非高亮色加透明
检查对比度不能只看工具数值
Chrome DevTools 的 Contrast Checker 显示 4.8:1，不等于眼睛舒服——它没模拟暗环境瞳孔状态和屏幕泛光：
立即学习“前端免费学习笔记（深入）”；
- 真机在暗室里看：关掉顶灯，把屏幕亮度调到 50%，观察 10 秒后是否觉得某块颜色“在动”或“抢焦点”
- 用系统级暗色滤镜（如 macOS Night Shift / Windows Night Light）叠加测试，看色相是否偏移失真
- 关键交互元素（如按钮 hover 状态）的
l%变化幅度建议 ≤10%，大幅明度跳跃才是刺眼主因
l% 是绝对值，不是感知亮度。同一组 h 和 s，在 l: 25% 和 l: 35% 之间切换，比把 s 从 80% 降到 40% 对缓解刺眼更有效。 
