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

When using the LESS CSS preprocessor, both lighten() and tint() are functions for manipulating colors, but they operate differently.

lighten() Function

The lighten() function is used to lighten a color. It accepts two parameters: a color and a percentage value. This function works by increasing the brightness of the color while keeping the hue and saturation unchanged. For example, if you want to lighten a color by 10%, you can use it as follows:

less
@base-color: #444444;
@lighter-color: lighten(@base-color, 10%);

Here, if @base-color is a darker gray (#444444), using lighten() results in a color with increased brightness by 10%.

tint() Function

The tint() function is also used to lighten a color, but it achieves this by mixing the specified color with white. It accepts two parameters: a color and a percentage value, where the percentage represents the proportion of white to mix. For example, if you want to mix a color with 50% white, you can use it as follows:

less
@base-color: #444444;
@tinted-color: tint(@base-color, 50%);

This mixes @base-color with 50% white, producing a moderately bright color.

Summary

In summary, lighten() lightens a color purely by adjusting its brightness, while tint() achieves lightening through mixing with white. Consequently, tint() typically produces a softer, whiter color, whereas lighten() retains more of the original color characteristics. The choice between these functions depends on the specific visual effect you aim to achieve.