lighten() 和 darken() 是 hsl 的 l 值线性加减器，非视觉提亮/加深工具；直接用于高饱和色或极值明度色会导致发粉、变黑、失真或编译报错，且不校验 wcag 对比度。
lighten() 和 darken() 不是“视觉提亮/加深工具”，而是 HSL 的 L 值线性加减器——直接套用高饱和色或极端明度色，大概率发粉、变黑、失真甚至编译报错。
darken() 为什么让深色按钮 hover 后突然变黑？
它把 HSL 的 lightness 值硬减，不考虑人眼感知和色彩边界：
- darken(#036, 30%)：原色 L≈20%，减 30% 得 -10%，浏览器 clamp 到 0%，输出
#000，色相彻底丢失 - 对
#1a1a1a（L≈6%）用darken($color, 10%)，结果仍是#000，文字与背景融合不可读 - Sass 不校验 WCAG 对比度，只忠实地算数——你得自己查原始色的
lightness($color)，L 时慎用 <code>darken()超过 5%
lighten() 在浅色上失效的常见表现
亮度已达上限，函数无操作空间，但代码看起来“应该生效”：
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
-
lighten(#fff, 5%)编译后还是#fff—— L 已为 100%，无法再加 -
lighten(#e0e0e0, 15%)→#ffffff，一步到白，中间层次全丢 - 对高饱和珊瑚红
#ff6b6b用lighten($color, 20%)，L 从 ~55% 拉到 75%，但 S 仍 70%，结果偏粉、失去活力 - 传入带 alpha 的颜色如
rgba(50, 50, 50, 0.5)，lighten()只动 RGB，alpha 不变；想“更通透”得手动组合fade-out(lighten($color, 20%), 0.1)
什么情况下能安全用 lighten()/darken()？
仅限中等明度、中等饱和度、小幅度调整的保守场景：
- 原始色
lightness($color)在 30%～70% 区间（如#3498db的 L≈53%） - 饱和度在 40%～60%，避开
#e74c3c这类高饱和暖色 - 调整量 ≤10%，超过 15% 就要警惕发灰或色相塌陷
- 仅用于灰色系交互反馈，比如
lighten(#666, 8%)做文字 hover，而非品牌主色状态色
比 lighten()/darken() 更靠谱的替代写法
真正可控的明暗衍生，优先用语义清晰、空间合理的函数：
- 用
mix(white, $color, 20%)替代lighten($color, 20%)：模拟加白粉，柔和不突兀，对暖色尤其友好 - 用
mix(black, $color, 15%)替代darken($color, 15%)：比硬压 L 值更保留色相特征 - 用
adjust-color($color, $lightness: 10%, $saturation: -5%)：提亮同时微量降饱和，防发粉 - 深色模式适配优先选
scale-color($base, $lightness: 0.7)（乘法缩放），比darken($base, 30%)输出更一致
所有这些函数都在编译期运行，最终输出的是静态 HEX/RGB 值。别信“调亮 20% 就一定可读”，务必用 DevTools 实测对比度，尤其注意 OLED 屏对浅灰的渲染偏差——这才是最容易被忽略的落地环节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
