HSL三参数非等权重：H为0–360角度值，S/L须带%，低S高L易显灰，深色模式宜先置S=0%再微调H，hsla()的alpha叠加受背景影响大，兼容性需注意Safari旧版及IE限制。
hsl() 函数里三个参数到底怎么动才不翻车
色相（H）、饱和度（S）、亮度（L）不是等权重调节的——调 hsl(0, 100%, 50%) 是纯红，但把 L 拉到 90%，它就变粉；再拉到 95%，几乎就是白底加一丁点红晕。这不是 bug，是 HSL 的设计逻辑：亮度影响的是“明暗层级”，不是简单加灰。
-
H是角度值（0–360），0和360都代表红色，别写成361或负数，CSS 不认 -
S和L是百分比，必须带%，写成hsl(120, 80, 60)会直接失效，浏览器当无效声明丢弃 - 低饱和度 + 高亮度组合（如
hsl(240, 10%, 95%)）容易误判为“灰色”，其实它是极淡的蓝，用吸管工具取色会暴露真实 H 值
为什么用 hsl() 调深色模式背景总显得脏
深色场景下，人眼对亮度变化更敏感，而 HSL 的 L 参数在 0%–30% 区间是非线性的——L: 10% 到 20% 的视觉明暗差，远大于 50% 到 60%。直接按比例降亮度，比如从 hsl(0, 0%, 90%) 改成 hsl(0, 0%, 20%)，出来的不是“深灰”，而是泛青/泛棕的灰，尤其在 OLED 屏上明显。
- 深色模式优先固定
S: 0%（去色），再微调H做冷暖校正：比如hsl(210, 0%, 12%)比hsl(0, 0%, 12%)更中性 - 避免用高饱和色配低亮度，
hsl(180, 80%, 15%)看起来像墨绿泥，不是深青 - 检查实际渲染：Chrome DevTools 的颜色拾取器默认显示 sRGB，要手动切到 HSL 模式看实时三值，别信预览小方块
hsl() 和 hsla() 透明度叠加时的坑
hsla() 的 A（alpha）不是和背景做简单图层混合——它先按 alpha 把当前色“稀释”进透明通道，再和父容器背景合成。这意味着：同一个 hsla(120, 100%, 50%, 0.5)，放在白色背景和黑色背景上，最终人眼看到的绿色饱和度完全不同。
- 半透色慎用高
S：比如hsla(0, 100%, 50%, 0.3)叠在白底上，实际呈现接近粉红，不是淡红 - 想保持色调稳定？改用
rgb()+ alpha，或把透明度交给父元素的opacity（但会连子元素一起透） - 动画中渐变透明时，
hsla()的A插值是线性的，但人眼感知是非线性的，A从0.1→0.2比0.8→0.9显得更“跳”
浏览器兼容性里最常被忽略的细节
所有现代浏览器都支持 hsl() 和 hsla()，但 IE 仅支持到 hsl()（无 alpha），且不支持空格外的任意分隔符。更隐蔽的问题是：Safari 在旧版本（≤15.4）中，对 hsl() 里的计算表达式支持不稳定，比如 hsl(calc(120 + 10), 100%, 50%) 可能被整个忽略。
立即学习“前端免费学习笔记（深入）”；
- 变量里存 HSL 值要用
--hue: 120; --sat: 100%; --light: 50%;，然后拼成hsl(var(--hue), var(--sat), var(--light))，别试图在hsl()里直接算 - CSS-in-JS 库（如 styled-components）若未开启 CSSOM 支持，动态插值
hsl(${h}, ${s}, ${l})可能触发字符串拼接错误，建议统一转成十六进制再传 - PostCSS 插件（如 cssnano）默认会把
hsl()压缩成hex，如果后续 JS 还要读取 HSL 值，得关掉该压缩项
