calculate, difference, between, color hexadecimal

Question

I would know if somebody knows how to calculate difference between colors hexadecimals?

For a less file, i have this:

@s1-color-main: #2DAEBF;

@s1-color-ts1: #0092b3;
@s1-color-ts2: #0087a6;
@s1-color-ts3: #008099;
@s1-color-ts4: #00758c;
@s1-color-ts5: #555;
@s1-color-ts6: #006073;
@s1-color-ts7: #005566;

And i would have something like this for the general case:

@s1-color-main: #2DAEBF;

@s1-color-ts1: @s1-color-main + #111;
@s1-color-ts2: @s1-color-main + #222;
@s1-color-ts3: @s1-color-main + #333;
@s1-color-ts4: @s1-color-main + #444;
@s1-color-ts5: #555;
@s1-color-ts6: @s1-color-main + #666;
@s1-color-ts7: @s1-color-main + #777;

I searched on web but i couldn't find any thing :(

But i don't know how calculate each difference between the main color.

Thanks for your help ;)

Answer 1

LESS is quite powerful in color operations, in your case I would especially recommend checking out the blending functions like difference(), exclusion(), negation() or average(). Some of them might already give you the desired effects.

But you can also perform addition and subtraction of hex colors in LESS.

To get a difference in hex colors you could just subtract two colors:

color-diff: (#333 - #222);

which will return the per-channel difference in hex:

color-diff: #111111;

So to get a color that is #111 "higher" than @x you would just need to do

new-color: (@x + #111);

But as you can imagine things with hex colors don't stay so simple. Lets look at your first example:

// @s1-color-main - @s1-color-ts1
diff: (#2DAEBF - #0092b3);

returns

diff: #2d1c0c;

so (as your base/main color was the one with higher values) we can calculate @s1-color-ts1 by subtracting the returned diff from our main color

(@s1-color-main - #2d1c0c)

But as you can see, the problem now is that we would need to know which color has higher values to choose the right operation ... and it can get a bit messy.

Luckily LESS is quite smart ... and for calculated colors saved in a variable LESS remembers the actual color value diffs (including the sign i.e. whether they are negative or positive).
For a very simple example

@diff1: (#222 - #333);
@diff2: (#eee + #eee);

if we return the calculated values of the diffs

color1: @diff1;
color2: @diff2;

we get

color1: #000000;
color2: #ffffff;

When returned (in CSS), all negative values get cut off at 0 and values larger than FF get cut off at FF. However, if we use the variables in further operations we se that @diff1 actually holds an RGB equivalent to something like -17 -17 -17 (a negative value for each of the RGB color components), and @diff2 holds the RGB equivalent of 476 476 476, which becomes apparent if we do something like

color3: (#888888 + @diff1);
color4: (@diff2 / 2);

and get

color3: #777777;
color4: #eeeeee;

So, how can you use this to your advantage? Now you can do something like

@s1-color-diff1: (#0092b3 - #2DAEBF); // which saves negative color values

and use this variable do calculate @s1-color-ts1 by adding it to whatever the main color is

@s1-color-ts1: @s1-color-main + @s1-color-diff1;

you could also save the whole list of diffs, like so

@diffs: (#0092b3 - #2DAEBF),
        (#0087a6 - #2DAEBF),
        (#008099 - #2DAEBF),
        (#00758c - #2DAEBF),
        (#555555 - #2DAEBF),
        (#006073 - #2DAEBF),
        (#005566 - #2DAEBF);

and access them when needed

@s1-color-ts2: @s1-color-main + extract(@diffs,2);

This way LESS takes care of all the RGB values in the calculations and you just need to deal with the hex codes. But LESS offers you a much better control over the colors by using the color component functions, such as the RGB functions red(), green(), blue() and rgb(). Which allow you to precisely tune each RGB color component/channel. So to figure out what the actual RGB diffs for your colors are, you could do something like (by extract the RGB components/channels, comparing them to the main color and neatly display them)

.rgb-diff(@v,@m){
  @t: @@v;
  @rm: red(@m); @gm: green(@m); @bm: blue(@m);
  @r: (red(@t) - @rm);
  @g: (green(@t) - @gm);
  @b: (blue(@t) - @bm);
  @{v}: @r @g @b;
}

rgb-diff {
  .rgb-diff(s1-color-ts1, @s1-color-main);
  .rgb-diff(s1-color-ts2, @s1-color-main);
  .rgb-diff(s1-color-ts3, @s1-color-main);
  .rgb-diff(s1-color-ts4, @s1-color-main);
  .rgb-diff(s1-color-ts5, @s1-color-main);
  .rgb-diff(s1-color-ts6, @s1-color-main);
  .rgb-diff(s1-color-ts7, @s1-color-main);
}

which should return this

rgb-diff {
  s1-color-ts1: -45 -28 -12;
  s1-color-ts2: -45 -39 -25;
  s1-color-ts3: -45 -46 -38;
  s1-color-ts4: -45 -57 -51;
  s1-color-ts5: 40 -89 -106;
  s1-color-ts6: -45 -78 -76;
  s1-color-ts7: -45 -89 -89;
}

and now you can use something like this

rgb((@r-main + @r), (@g-main + @g), (@b-main + @b));

to reconstruct the individual colors by adding their RGB diffs to the main/base color's RGB values.
Test:

.from-rgb(@r,@g,@b,@v,@m){
  @rm: red(@m); @gm: green(@m); @bm: blue(@m);
  @{v}: rgb((@rm + @r), (@gm + @g), (@bm + @b));
}

from-rgb {
  .from-rgb(-45, -28, -12, s1-color-ts1, @s1-color-main);
  .from-rgb(-45, -39, -25, s1-color-ts2, @s1-color-main);
  .from-rgb(-45, -46, -38, s1-color-ts3, @s1-color-main);
  .from-rgb(-45, -57, -51, s1-color-ts4, @s1-color-main);
  .from-rgb(40, -89, -106, s1-color-ts5, @s1-color-main);
  .from-rgb(-45, -78, -76, s1-color-ts6, @s1-color-main);
  .from-rgb(-45, -89, -89, s1-color-ts7, @s1-color-main);
}

should return your above set of hex colors, and you can now adjust all of them by simply adjusting your base color variable @s1-color-main.

Answer 2

Even if you solve the mathematical part of the question, this won't help you much to get similar, but distinct, colors. The eye perceives differences in the blue part much less than differences in the red part. So unless you want to learn a lot about color spaces and vision models, better select your colors from a color picker instead of trying to calculate them.

Answer 3

check this this link will show how to establish difference between two hex colours. hope this help you.