如何将LESS的lighten/darken函数精准转为CSS color-mix？

问题核心是两者的色彩处理逻辑完全不同：

• LESS的lighten()/darken()是直接在HSL色彩空间调整亮度通道（L分量），比如lighten(@color, 5%)就是把原颜色的HSL亮度值直接加5%，色相和饱和度完全不变。
• 你用的color-mix(in srgb, white/black, var(--my-color))是在SRGB空间进行颜色插值，混合白色会同时降低饱和度、提高亮度，和HSL单纯调亮度的效果差异极大，尤其高饱和度颜色表现最明显。

正确转换方式 #

要和LESS效果完全匹配，必须在HSL空间操作，用CSS原生颜色函数提取并调整分量：

1. 替换lighten(@mycolor, x%)：

hsl(hue(var(--my-color)), saturation(var(--my-color)), calc(lightness(var(--my-color)) + x%))

2. 替换darken(@mycolor, x%)：

hsl(hue(var(--my-color)), saturation(var(--my-color)), calc(lightness(var(--my-color)) - x%))

示例对比 #

比如原LESS代码：

@my-color: #ff0000; /* HSL: 0, 100%, 50% */
.lightened { color: lighten(@my-color, 5%); } /* 结果HSL: 0, 100%, 55% → #ff3333 */

• 你的原转换方式：color-mix(in srgb, white 5%, #ff0000) → 结果是#f20c0c（饱和度降低，亮度提升逻辑不同）
• 正确转换方式：hsl(hue(var(--my-color)), saturation(var(--my-color)), calc(lightness(var(--my-color)) + 5%)) → 结果是#ff3333，和LESS完全一致

注意事项 #

• 确保目标浏览器支持CSS颜色函数（hue()/saturation()/lightness()），现代主流浏览器（Chrome 99+、Firefox 96+、Safari 15.4+）都已支持。
• 如果需要兼容旧浏览器，可以保留原LESS编译作为降级方案，同时输出新的CSS变量版本。

内容的提问来源于stack exchange，提问作者NRaf