hellboy hellboy - 1 year ago 80
Less Question

Getting alpha from normal and darken color


darkColor = darken(normalColor, alpha)

are known,
is unknown.

How can I calculate

How should I interpolate alpha if multiple color tuples (
) are presented?

Answer Source

As per Less docs, the below is how darken() function is defined:

Decrease the lightness of a color in the HSL color space by an absolute amount.

So given the normal color and its darkened version, the logic to find the percentage is to find out the lightness of both the normal color, the dark color and then subtract the latter from the former. Less has a built-in function to calculate the lightness() of a given color also and so it can be used directly.

@normalColor: #AAAAAA;
@darkColor: #6A6A6A; /* this is darken(@normalColor, 25%) */

  percentage: lightness(@normalColor) - lightness(@darkColor);


  • Calculation is lightness of normal color - lightness of dark color as darken decreases lightness.
  • The output is an approximate value and not accurate. For example, in the above case the output is 25.09803922% and not 25%. We cannot round down the output value also because deviation can be positive or negative. For example, if the dark color is #919191 (= darken(@normalColor, 10%)), the calculated output is 9.80392157%.
  • This method works only when the dark color is actually a darkened version of the normal color. That is, the hue and saturation of the two colors should be the same as the darken function modifies only the lightness.