hsl()亮度非线性且非感知均匀，0%为黑、50%最饱和、100%为白；提亮宜小幅增加l并配合降s，或改用lch()/color-mix()；全局提亮优先filter:brightness()；注意设备与深色模式差异。
hsl() 第三个参数是亮度，调高它确实会让颜色变亮
但不是线性变亮，也不是“越亮越白”——hsl() 的亮度（lightness）定义是：0% 为纯黑，50% 是该色相最饱和的“标准亮度”，100% 为纯白。所以从 50% 往上提，颜色会逐渐发灰、失饱和，到 90% 左右基本接近浅灰。
- 想让
hsl(200, 70%, 40%)明显变亮，改成hsl(200, 70%, 60%)比较合理；直接拉到85%就只剩一点蓝调影子了 - 如果目标是“更鲜亮但不发灰”，优先降饱和度
s+ 提亮度l组合调整，比如hsl(200, 50%, 70%) - 浏览器兼容性没问题，
hsl()在所有现代浏览器中都支持，包括 IE9+
别用 hsl() 调亮度替代 contrast() 滤镜
如果你实际想让整个元素（比如按钮、文字块）在暗背景上更醒目，直接调 hsl() 颜色值不如用 CSS 滤镜：filter: contrast(1.2) 或 brightness(1.1)。前者增强对比，后者才是真·全局提亮，且不影响色相和饱和度。
-
hsl()只改颜色本身，对半透明、阴影、边框等无影响 -
brightness()会作用于整个渲染盒，包括子元素和伪元素，但可能让图片过曝 - 滤镜有性能开销，频繁动画中慎用
brightness()
想精确控制明暗变化？用 color-mix() 或 lch() 更靠谱
hsl() 的亮度轴是非感知均匀的——人眼觉得“50%→60%”和“80%→90%”的明度变化幅度差很多。真正按视觉明度等距调整，推荐 lch()（Chrome 111+、Safari 16.4+）或降级方案 color-mix(in srgb, …)。
-
lch(65% 50 250)中的65%是 CIELCH 明度，0–100 对应黑–白，人眼感知更线性 - 旧浏览器 fallback：用
color-mix(in srgb, white 30%, hsl(200 70% 40%))模拟提亮效果 - 注意
lch()的c（色度）值太高时，提亮会自动降饱和，这是正常行为，不是 bug
调试时别只看色值，要盯住实际渲染效果
同一个 hsl(0, 100%, 50%) 在 OLED 屏和 IPS 屏上看起来明暗不同，深色模式下还可能被系统自动调暗。开发时容易忽略这点，只盯着数字改。
立即学习“前端免费学习笔记（深入）”；
- 浏览器 DevTools 的颜色拾取器（如 Chrome 的 eyedropper）点开后能实时切换
hsl/lch/hex，比心算靠谱 - 用
prefers-color-scheme: dark媒体查询时，别假设hsl(… 60%)在暗背景下一定够亮，实测文字可读性 - 移动端 Safari 对
hsl()解析偶尔有小偏差，尤其l接近 0% 或 100% 时，建议避开极端值
