css - 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 in LESS like color:darken(@base_color, x%);

So my question is:

If I know my base color and my output color after the 'darken' operation,

how do I know what % to give the darken operation to produce my output color?

eg: If i'm going from #952262 -> #681744 what would be my %?

Maybe there's a site that does these conversions?

Hopefully the answer is not 'Trial and error'.

Answer 1

Has A Few Challenges and Caveats

Normally, people do not use a function like darken() to get a color that they already know they want to end up at (they just put the color value they already know they want). However, I will assume there is more behind this question than that.

The darken() Function

The darken() function of LESS affects the "brightness" or "lightness" portion of a color considered from the viewpoint of its hsl settings (hue, saturation, lightness). Here's your two colors considered from that view (based on this site, I have noticed some variations between sites--some are probably more accurate than others):

#952262 = hsl(327, 63%, 36%)
#681744 = hsl(327, 64%, 25%)

So the darkness value you seek can be hand calculated from that site, by just a subtraction, 36% - 25% = 11%. Plugging that into your function:

darken(@base_color, 11%);

Yields

#671844 /* not 681744! */ 

Hey! That Didn't Match My Target!

Notice that the s (saturation) value above shows as different by 1% from your base to your target, which means that technically you cannot get from your base color to the target color purely through the darken() function. Instead, you either need to use another function to tweak the s value also, or your target should be adjusted slightly to the following (which keeps s at 63%):

#681844 = hsl(327, 63%, 25%)

But that number (#681844) still does not match the LESS output (#671844). The website shows the LESS output as being hsl(327, 62%, 25%) (notice the saturation value dropped to 62%). I suspect what this means is a difference in rounding calculations between the website calculations and the LESS function calculations. This may well be why your original number was off by 1% on saturation as well, whatever program you used rounded differently than the website also. This is probably not a big issue, as it gets you close to your target value.

Using LESS to Calculate It

Now, depending on what your actually doing, you can use LESS to calculate that percentage, instead of hand calculating it, using the lightness() function. Assume you had adjusted your target to #681844 based off the website. Then this is an example of getting the percentage you want (I use a fake property color-calc to show the calcuation:

@base_color: #952262;  /* Base #952262 = hsl(327, 63%, 36%) */
@real_target_color: #681844; /* Real Target #681844 = hsl(327, 63%, 25%) */
@color_calc: (lightness(@base_color) - lightness(@real_target_color));

.test {
  color-calc: @color_calc;
  color: darken(@base_color, 11%);
} 

Outputs:

.test {
  color-calc: 11%;
  color: #671844;
}

Notice that it calculated the 11% difference in darkness. Also, notice that it still ends up with a value slightly different than target because of that (I suppose) rounding issue. Plugging in the final value LESS generates (#671844) as the target still yields the same 11% value for darken().