What’s the difference between the LESS color functions lighten and tint?

Question

Both lighten and tint seem to make a color lighter (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 tint (note the use of the word “lighter”):

If you tinted a color, you've been adding white to the original color.

A tint is lighter than the original color.

Answer 1

From this thread that was asking for tint comes this comment:

Tint/shade is not the same thing as lighten/darken. Tint and shade are effectively mixing with white and black respectively, whereas lighten/darken are manuipulating the luminance channel independently of hue and saturation. The former can produce hue shifts, whereas the latter does not. That's not to say it's not useful, just that it's not the same thing. Mathematically it's that linear changes in RGB space do not necessarily correspond with linear changes in HSL space, though in practice they will produce fairly similar results.

There is a slight difference in the math behind the two.

Answer 2

Both functions produce a 'lighter' color somehow but use different methods to do so.

Take a look at the source to see 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 is mixing in white (as stated by the documentation) and lighten increases the lightness of in the HSL color model.