LESS的颜色函数lighten和tint有什么区别？

Question

< p > lighten 和 tint 看起来都会使颜色变得更浅（更接近白色）。为什么LESS会定义两者？

根据LESS文档：

lighten（@color，10％）; //返回一个颜色比原来亮10％

tint（@color，10％）; //返回与白色混合10％的颜色

如一个网站 定义色调（请注意使用“更浅”一词）：

如果你添加了白色到原始颜色中，你就可以制成浅色。

色调比原来的颜色浅。

- jaredjacobs

---

似乎“tint”和“shade”已经从文档中完全删除了...但它仍然可以工作（1.7.0）。 - Nico Prat

更新：看起来tint和shade现在已经重新出现在文档中了，所以如果你像我一样担心的话，至少在v2.7.1中它们似乎仍然是安全可用的：http://lesscss.org/functions/#color-operations-tint - Michael

Answer 1

这两个函数都可以以某种方式生成“较浅”的颜色，但使用不同的方法来实现。

请查看源代码以了解它们的工作方式：

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颜色模型中增加了亮度。

- kapex

---

感谢提供源代码链接和片段。你回答得很好。我接受了ScottS的答案，因为它提供了更高层次的分析和同时使用两者的动机。 - jaredjacobs

Answer 2

这篇帖子提出了对“色调（tint）”的要求，而这条评论给出了解释：

色调和浅/深不是同一回事。色调和浅/深分别与白色和黑色混合，而浅/深则是单独操作亮度通道，而不受色相和饱和度的影响。前者可以产生色相偏移，后者则不能。但并不意味着它没有用处，只是它不同于浅/深。从数学上讲，RGB空间中的线性变化不一定与HSL空间中的线性变化相对应，但在实践中，它们可以产生相似的结果。

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

- ScottS

---

非常好的帖子，谢谢。所以是tint可以改变色调。我搞反了。 - jaredjacobs

Answer 3

这里有两个函数的演示，点击这里。

似乎lighten和darken比tint和shade更快地达到白色和黑色。

就我这个业余爱好者的眼光而言，似乎lighten和darken可以改变颜色的色相，而tint和shade则不能。

- jaredjacobs