Color operations in less

Question

I\'m already using color theme in my website, where, for example I have a standard hex color for link states regular/hover/active.

Now I want to use color operations

Answer 1

LESS has the function lightness(), that returns the lightness channel of a color in the hsl space.

So, obviously

lightness(hsl(90, 100%, 50%))

would return

50%

but you can do something more sophisticated, like a mixin, that calculates the lightness difference between two colors:

@nice-blue: #5B83AD;
@lighter-blue: #6F92B7;

.test(@color1, @color2) {
  @lightdif: (lightness(@color1) - lightness(@color2));
  color1: @color1;
  color2: @color2;
  lightness-dif:  @lightdif;
}

.test {
   .test(@lighter-blue, @nice-blue);
   output-color: lighten(@nice-blue, @lightdif);
}

which would return:

.test {
  color1: #6f92b7;
  color2: #5b83ad;
  lightness-dif: 6%;
  output-color: #6f92b7;
}

In your case (#952262 -> #681744) the lightness-dif would be 11%.

Now you can play with this a little, for example with guards, you can define which color is darker/lighter and use the absolute difference, depends on what exactly you want to use it for.

For more color operations you can read lesscss.org under "Function Reference" -> "Color functions".

And if you are using a javascript implementation of less you can do even more using javascript interpolation (with back-ticks) and javascript functions inside LESS.