colors - LESS 颜色函数变亮和着色有什么区别？

Question

两者似乎都使颜色变浅（更接近白色）lighten。tint为什么 LESS 定义两者？

从LESS 文档中：

lighten(@color, 10%); // return a color 10% points *lighter*

tint(@color, 10%); // return a color mixed 10% with white

一个站点如何定义色调（注意使用“较浅”一词）：

如果你着色了一种颜色，你就是在原始颜色中添加了白色。

色调比原始颜色浅。

Answer 1

来自这个要求的线程tint来自这个评论：

色调/阴影与变亮/变暗不同。色调和阴影分别有效地与白色和黑色混合，而变亮/变暗则独立于色调和饱和度来操纵亮度通道。前者可以产生色调变化，而后者不会。这并不是说它没有用，只是它不是一回事。从数学上讲，RGB 空间的线性变化不一定与 HSL 空间的线性变化相对应，尽管在实践中它们会产生相当相似的结果。

两者背后的数学略有不同。

Answer 2

这两个函数都以某种方式产生“较浅”的颜色，但使用不同的方法来做到这一点。

查看源代码以了解它们是如何工作的：

tint: function(color, amount) {
    return this.mix(this.rgb(255,255,255), color, amount);
},

lighten: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l += amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
},

白色混合也是如此tint（如文档所述）并lighten增加了 HSL 颜色模型中的亮度。

Answer 3

这是两个功能的演示。

它似乎lighten和分别达到白色和黑色，比和darken快得多。tintshade

在我未经训练的眼睛看来，它也lighten可以darken改变色调，而tint不能shade。