lighten()和darken()仅线性增减HSL亮度值，对#000/#fff无效，高饱和色易发粉或失真，安全使用需明度30%~70%且调整≤15%。
直接用 lighten() 和 darken() 处理非中性色时，大概率会翻车——不是发灰就是偏粉，尤其在红、橙、紫、蓝区域特别明显。它们不是“视觉上变亮/变暗”，而是粗暴地加减 HSL 的 L 值，边界值（如 #000、#fff）完全无效。
lighten() 和 darken() 为什么经常失效
这两个函数本质是 HSL 亮度通道的线性增减：输入 hsl(204, 70%, 53%)，调用 lighten($color, 20%) 就是把 53% 改成 73%，不碰色相和饱和度。问题就出在这儿：
-
lighten(#fff, 10%)还是#fff，darken(#000, 10%)还是#000—— 已到极值，无法再动 - 对高饱和暖色（如
#ff6b6b）加 20% 亮度，L拉到 80%+，但饱和度没降，结果颜色“发粉”或“漂白” - 对深蓝（如
#036）调darken($color, 30%)，L直接归零变纯黑，丢失原有色相特征 - 在深色背景上硬套
lighten($bg, 40%)（比如从#1a1a1a到#4d4d4d），文字依然不可读
什么场景下可以安全用 lighten()/darken()
它们只适合已有中等明度、中等饱和度的主色，且调整幅度要克制：
- 原始色明度建议落在
30% ~ 70%区间（可用lightness($color)查） - 调整步长别超
15%，超过 25% 就容易撞边界或失真 - 典型可用色：品牌蓝
#3498db、灰蓝#6c757d、橄榄绿#7a8c5e - 慎用于按钮悬停、标签状态等需保色相一致性的场景——不如改用
scale-color() - 别拿它处理已带透明度的颜色（如
rgba(...)），Sass 会报Operation on an invalid type
更稳的替代方案：mix() 与 scale-color()
想真正控制明暗又不丢质感，优先换这俩：
-
mix(white, $color, 20%)比lighten($color, 20%)更柔和，尤其对暖色；mix(black, $color, 20%)比darken()更有“加深感”而非“变灰” -
scale-color($color, $lightness: 1.3)是乘法缩放，对#333有效，对#000也安全（输出仍是#000）；系数写小数，别写130% - 深色模式适配推荐：
scale-color($base, $lightness: 0.7)，比darken($base, 30%)输出更一致 - 若必须用
lighten()，先desaturate($color, 10%)再调亮，能缓解发粉问题
别忽略编译后 CSS 的实际表现
所有这些函数都在编译期运行，最终输出的是普通 HEX 或 RGB 值，所以 IE 兼容性没问题——但你得亲自验证输出结果是否符合设计预期：
- 别信“调亮 20% 就一定可读”，用 DevTools 检查对比度（至少 4.5:1）
- 多设备预览：OLED 屏对浅灰敏感，
#e0e0e0在某些手机上看接近白底 - 批量生成调色板时，10 阶以上慎用嵌套
@for+ 多函数组合，Node.js 可能栈溢出 - 若项目已升级到 Sass 4.0+，优先迁移到
color.adjust($color, $lightness: 10%)，但注意命名空间和参数写法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
