CSS原生不支持lighten()/darken()函数，仅Sass/Less预处理器或JS可实现；Sass中该函数基于HSL亮度通道，大幅调整易致色相畸变；纯CSS需用hsl()+calc()配合预设HSL变量；JS实现须经sRGB线性转换与gamma校正。
lighten/darken 在纯 CSS 里根本不存在
CSS 原生不提供 lighten() 或 darken() 这类函数。你看到的要么是 Sass/Less 的预处理器功能，要么是 JS 动态计算的结果。直接写 color: lighten(#3498db, 20%); 会完全失效，浏览器连解析都不会解析——它就不是 CSS 语法。
Sass 中的 lighten() 和 darken() 怎么用才不翻车
它们操作的是 HSL 色彩空间里的亮度（L）通道，不是简单地加减 RGB 值。这意味着对深色（比如 #1a1a1a）调用 lighten($color, 50%)，结果很可能不是你想要的“浅灰”，而是偏棕/偏紫的意外色——因为 L 值被拉到上限后，H/S 会被隐式挤压。
- 只对基础色或中性色做小幅度调整（
lighten($blue, 5%–15%)更安全） - 避免对已很暗（L 90%）的颜色大幅 lighten/darken
- 用
hsl()手动验证：Sass 编译后生成的值，拿去 Chrome DevTools 里点开颜色预览，看 H/S 是否畸变
纯 CSS 想模拟深浅，只能靠 hsl() + calc() 硬凑
现代 CSS 支持 hsl() 和 calc()，可以手动调 L 值。但注意：必须从 HSL 源头开始定义颜色，不能对十六进制色实时运算。
/* ✅ 可行：源头用 hsl，L 值可算 */
:root {
--base-h: 200;
--base-s: 70%;
--base-l: 50%;
}
.card { background: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%)); }
<p>/<em> ❌ 不可行：无法把 #3498db 动态转成 hsl 后再算 </em>/
.card { background: hsl(calc(...), ..., calc(...)); } /<em> 语法错误 </em>/所以真要 CSS 原生方案，得提前规划好整套 HSL 变量，而不是临时“提亮一个 HEX”。
立即学习“前端免费学习笔记（深入）”；
JS 动态计算 light/dark 时最容易漏掉 gamma 校正
很多手写 RGB 转 HSL 再改 L 的函数，直接在线性 RGB 上算亮度，导致视觉上“提亮 20%”在深色区域几乎看不出变化，在浅色区又过曝。真实人眼感知的明度接近 sRGB 的非线性响应。
- 用
getComputedStyle(el).color读出的始终是 sRGB 值，但多数简易算法按线性处理 - 真正靠谱的做法是走
color-mix(in lch, ...)（Chrome 111+），或者用OKLCH空间（需 polyfill） - 如果只能用老方法，至少对 R/G/B 做 sRGB → linear → HSL → 调 L → linear → sRGB 的完整转换，别跳步
那个“看起来差不多”的简易算法，往往在深灰到黑那段区间彻底失准。
