Color operations less

Question

I already use a color theme on my website, where, for example, I have a standard hex color for regular / hover / active link states.

Now I want to use color operations in LESS as color:darken(@base_color, x%);

So my question is:

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

how to find out what% to give darken operations to get output color?

eg: If I go from # 952262 → # 681744, then what will be my%?

Maybe there is a site that does these conversions?

Hope the answer is not "trial and error."

Answer 1

has several problems and caveats

Usually people don’t use a function like darken() to get the color that they already know they want to finish (they just add the color value that they already know they want). However, I assume that there is more to this issue.

darken() function

The darken() LESS function affects part of the "brightness" or "lightness" of a color, viewed from the point of view of its hsl settings (hue, saturation, lightness). Here, your two colors are considered from this point of view ( based on this site , I noticed some options between sites - some of them are probably more accurate than others):

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

Thus, the darkness you are looking for can be calculated manually from this site, simply by subtraction, 36% - 25% = 11% . Including this in your function:

 darken(@base_color, 11%); 

Productivity

 #671844 /* not 681744! */ 

Hey! This did not fit my purpose!

Please note that the above s (saturation) value differs from 1% from the base to your target, which means that technically you cannot get from the base color to the target color only through the darken() function, Instead you need to either use another function to change the value of s , or your goal should be slightly adjusted to the following (which keeps s at 63% ):

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

But this number ( #681844 ) still does not match the LESS output ( #671844 ). The website shows LESS output as hsl(327, 62%, 25%) (note that the saturation value has dropped to 62% ). I suspect that this means the difference in rounding calculations between website calculations and LESS function calculations. This may be the reason why your original number was turned off by 1% during saturation, no matter which program you used rounded differently than on the website. This is probably not a big problem, as it brings you closer to the target value.

Using LESS to calculate

Now, depending on what you are actually doing, you can use LESS to calculate this percentage, instead of calculating it manually using the lightness() function. Suppose you adjusted your target to #681844 based on a website. Then this is an example of getting the desired percentage (I use the fake color-calc property to show the calculation:

 @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; } 

Note that he calculated the difference of 11% in the dark. Also, note that it still ends with a value slightly different from the target due to this rounding problem (I suppose). Enabling the final LESS value generates ( #671844 ), since the target still gives the same 11% value for darken() .

Answer 2

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

So obviously

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

will return

 50% 

but you can do something more complex, like mixin, which calculates the difference in brightness 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 will return:

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

In your case (# 952262 → # 681744) lightness-dif will be 11%.

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

For more color operations, you can read lesscss.org in the " Feature Reference" → "Color Functions" section.

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

Answer 3

I created a tool that offers color features , as it bothers me daily. It lists most of the LESS functions that get from one color to another, so that you can focus on using darken color or softlight with color, it makes more sense from a design point of view.