hsl的l参数是rgb三通道最大值与最小值的算术平均，非感知亮度，导致相同l值下黄色（cie y≈0.93）比蓝色（cie y≈0.07）视觉亮十余倍；应改用oklch()的l或wcag标准流程。
因为 hsl() 的 L 参数是 RGB 三通道最大值与最小值的算术平均，不是人眼感知亮度，所以数值相等 ≠ 视觉明暗一致。
hsl() 的 L 是数学平均，不是视觉亮度
L = (max(R,G,B) + min(R,G,B)) / 2 这个公式完全不考虑人眼对不同波长光的敏感度差异。比如 hsl(60, 100%, 50%)（黄）在 CIE Y 相对亮度中约 0.93，而 hsl(240, 100%, 50%)（蓝）仅约 0.07 —— 数值都是 50%，实际光通量相差十三倍以上。
这不是浏览器 bug，是模型本身的设计取舍：HSL 优先保证计算简单、可逆、兼容 sRGB 显示器输出，而非模拟视觉系统。
同一 L 值下，不同色相的“灰度感”天差地别
在真实 UI 中你会遇到这些现象：
-
hsl(0, 100%, 50%)（红）看起来饱满有力，hsl(240, 100%, 50%)（蓝）却显得沉闷发灰 - 深色模式里把所有
L统一降到 30%，红色可能还可用，蓝色已接近不可见，紫色直接偏品 - 用
hsl()拉明暗梯度时，L=40%～60% 区间内黄色迅速变亮，蓝色几乎无变化，导致配色断层
别指望靠调参“修好”hsl() 的 L
试图用经验系数补偿（比如给蓝色额外 +15% L）只在特定色相/饱和度下有效，换一组颜色就失效。真正可行的路径只有两个：
- 改用
oklch()：它的L是 OKLab 空间中的感知亮度坐标（0=黑，1=白），oklch(0.6 0.3 60)和oklch(0.6 0.3 240)才真正在视觉上“一样亮” - 降级时接受不一致：写
color: hsl(60, 100%, 50%); color: oklch(0.78 0.22 90.2);，现代浏览器用后者，旧浏览器回退到前者 —— 但得明确知道 fallback 是有损的 - 调试必须量化：Chrome DevTools 颜色拾取器长按颜色值，看它显示的
CIE LCH L和sRGB Y，别信肉眼
关键不是换函数，而是意识到：hsl() 的 L 是快捷键，不是真相；只要涉及多色相统一明暗（比如状态标签、图表色带、主题切换），把它当“视觉中性”用，一定会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
