less 的 lighten()/darken() 函数因线性调整 hsl 明度 l 值导致品牌色失真，视觉上发灰、褪色或色相偏移；应改用 mix(@color, white/black, weight) 实现更符合人眼感知的明暗阶梯，并预定义固定色阶变量保障一致性。
Less 的 lighten() 和 darken() 对品牌色计算“不准”，根本不是函数有 bug，而是它们按 HSL 明度（L）线性调整，而人眼对色彩明暗的感知是非线性的。你看到“变浅了但发灰”“加深后不像深蓝像青灰”，正是这个机制在起作用。
为什么 lightendarken() 在品牌色上看起来“失真”
这两个函数把颜色转成 HSL 后，只动 L 值（0–100%），不碰 H（色相）和 S（饱和度）。高饱和品牌色（比如 #2ecc71 或 #e74c3c）的 L 值本身已偏中高或中低，+20% L 不是“加白”，而是把 L 从 60% 拉到 80%，结果常是亮度提了、饱和度被稀释——视觉上就是“发灰”“褪色”。
更隐蔽的是：同一百分比参数，在不同基础色上产生的明度变化量（ΔL）相同，但人眼感知的“亮/暗程度”差异很大。比如 lighten(#3498db, 15%) 和 lighten(#e67e22, 15%) 输出的 L 差值都是 +15，但前者显得柔和，后者可能直接变浅橙黄，失去品牌识别度。
用 mix() 替代 lighten()/darken() 控制视觉一致性
如果你需要“靠近白色的品牌浅色”或“靠近黑色的品牌深色”，mix() 更可控，因为它做的是 RGB 加权平均，结果更接近设计工具（如 Figma）里“混合透明度图层”的效果：
• mix(@primary, white, 20%) = 20% 主色 + 80% 白 → 浅色阶梯更均匀
• mix(@primary, black, 15%) = 15% 主色 + 85% 黑 → 深色不突兀、保留冷暖倾向
注意权重顺序不能反：mix(white, @primary, 20%) 是 20% 白 + 80% 主色，和上面效果相反。
避免嵌套调用和极值踩坑
品牌色衍生最常栽在这两个地方：
• darken(darken(@brand, 10%), 10%) 不等于 darken(@brand, 20%) —— 它是两次独立 L 值运算，中间色可能已偏移色相
• 对浅灰品牌色（如 @brand: #f5f5f5）用 lighten(@brand, 5%)，结果仍是 #ffffff（L 已达 100%），毫无区分度
• 传入 rgba() 颜色时，函数会先转为不透明等效色再算，lighten(rgba(46, 204, 113, 0.8), 10%) 实际按 #2ecc71 计算，忽略 alpha
真正可靠的方案：预生成色阶变量
别让编译器现场算，提前定义好一整套品牌色阶，既稳定又可维护：
• @brand: #2c3e50;
• @brand-light-1: mix(@brand, white, 12%);
• @brand-light-2: mix(@brand, white, 24%);
• @brand-dark-1: mix(@brand, black, 8%);
• @brand-dark-2: mix(@brand, black, 16%);
这样所有组件都引用固定变量，不会因某处漏了 % 符号、或变量未定义就崩，也方便设计师校验输出值是否与设计稿一致。复杂点在于：mix() 的权重比例要反复调试，12% 和 15% 在视觉上可能差很多，必须靠眼判，不能靠公式猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
