lighten与darken函数使用技巧解析

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS颜色函数lighten与darken使用详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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 < 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>/</p>

所以真要 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 的完整转换，别跳步

那个“看起来差不多”的简易算法，往往在深灰到黑那段区间彻底失准。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《lighten与darken函数使用技巧解析》文章吧，也可关注golang学习网公众号了解相关技术文章。