LESS颜色功能之间的区别是什么?

时间:2013-10-18 17:16:09

标签: colors less

lightentint似乎都会使颜色变浅(接近白色)。为什么LESS定义两者?

来自the LESS documentation

  

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

     

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

one site如何定义色调(请注意使用“更轻”字样):

  

如果您着色了一种颜色,那么您一直在为原始颜色添加白色。

     

色调比原始色彩浅。

3 个答案:

答案 0 :(得分:7)

两种功能都会以某种方式产生“较浅”的颜色,但使用不同的方法。

看看the source,了解它们的工作原理:

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颜色模型中的亮度

答案 1 :(得分:7)

要求tint的{​​{3}}来this thread

  

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

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

答案 2 :(得分:3)

这是a demonstration of both functions

似乎lightendarken分别达到白色和黑色,比tintshade快得多。

对于未经训练的人来说,lightendarken似乎可以改变色调,而tintshade则不会。{/ p>