hellboy - 3 months ago 10
Less Question

# Getting alpha from normal and darken color

Given

``````darkColor = darken(normalColor, alpha)
``````

`darkColor`
and
`normalColor`
are known,
`alpha`
is unknown.

How can I calculate
`alpha`
?

How should I interpolate alpha if multiple color tuples (
`normalColor`
,
`darkColor`
) are presented?

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%) */

#dummy{
percentage: lightness(@normalColor) - lightness(@darkColor);
}
``````

Notes:

• 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`.
Source (Stackoverflow)