What is the difference between the LESS color lighten and tint functions?

Question

Both lighten and tint appear colored (closer to white). Why does LESS define both?

From the LESS documentation :

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

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

How one site defines hue (note the use of the word “easier”):

If you changed the color, you added white to the original color.

The hue is lighter than the original color.

Answer 1

From this thread that tint requested, this comment came:

Hue / hue is not the same as light / dark. Hue and hue effectively blending with white and black respectively, while lighten / darken control the luminance channel independently of hue and saturation. The former may produce shades of change, while the latter may not. This does not mean that it is not useful, just that it is not the same. Mathematically, these linear changes in the RGB space do not necessarily correspond to the linear changes in the HSL space, although in practice they will give fairly similar results.

There is a slight difference in math after two.

Answer 2

Both functions produce a “lighter” color, but use different methods for this.

Check out the source to find out how they work:

 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); }, 

So tint mixes in white (as indicated in the documentation), and lighten increases the brightness of the HSL color model.

Answer 3

Heres a demonstration of both functions .

It seems that lighten and darken reach white and black respectively, much faster than tint and shade .

For my unprepared eye, it also appears that lighten and darken can change hue, while tint and shade do not.