Question

我知道是否有人知道如何计算十六进制颜色之间的差异？

对于较少的文件，我有这个：

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

对于一般情况我会有这样的事情：

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

我在网上搜索但我找不到任何东西:(

但我不知道如何计算主色之间的每个差异。

感谢您的帮助;）

Answer 1

在color operations中，LESS非常强大，在您的情况下，我特别建议您查看混合函数，例如difference()，exclusion()，negation()或average() 。其中一些可能已经给你带来了预期的效果。

但您也可以在LESS中执行添加和减法的十六进制颜色。

要获得十六进制颜色的差异，您可以减去两种颜色：

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

将以十六进制的形式返回每个通道的差异：

color-diff: #111111;

所以要获得#111“高于”@x的颜色，你只需要这样做

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

但是你可以想象用十六色的东西不会那么简单。让我们看看你的第一个例子：

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

返回

diff: #2d1c0c;

所以（因为您的基础/主要颜色是值较高的颜色）我们可以通过从主要颜色中减去返回的@s1-color-ts1来计算diff

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

但正如您所看到的，现在的问题是我们需要知道哪种颜色具有更高的值才能选择正确的操作...而且它可能会有点混乱。

幸运的是LESS很聪明......对于保存在变量中的计算颜色 LESS会记住实际的颜色值差异（包括符号，即它们是负数还是正数）。
一个非常简单的例子

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

如果我们返回diffs的计算值

color1: @diff1;
color2: @diff2;

我们得到了

color1: #000000;
color2: #ffffff;

返回时（在CSS中），所有负值都会在0处被切断，而大于FF的值会在FF处被切断。但是，如果我们在进一步的操作中使用变量，那么@diff1实际上保持RGB等价于-17 -17 -17（每个RGB颜色分量的负值），以及@diff2保持相当于476 476 476的RGB，如果我们做类似

的事情就会变得明显

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

并获取

color3: #777777;
color4: #eeeeee;

那么，你怎么能利用这个优势呢？现在你可以做类似

的事情了

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

并使用此变量通过将其添加到任何主要颜色

来计算@s1-color-ts1

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

您也可以保存整个差异列表，如此

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

并在需要时访问它们

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

这种方式LESS会处理计算中的所有RGB值，您只需要处理十六进制代码。但是LESS通过使用颜色分量函数（例如RGB函数red()，green()，blue()和rgb()，可以更好地控制颜色。这使您可以精确调整每个RGB颜色分量/通道。因此，要弄清楚颜色的实际RGB差异是什么，你可以做一些事情（通过提取RGB组件/通道，将它们与主要颜色进行比较并整齐地显示它们）

.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);
}

应返回此

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

现在你可以使用这样的东西了

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

通过将RGB差异添加到主/基色的RGB值来重建各个颜色测试：

.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);
}

应该返回上面的十六进制颜色，现在您可以通过简单地调整基色变量@s1-color-main来调整所有这些颜色。

Answer 2

即使您解决了问题的数学部分，这对于获得相似但不同的颜色也无济于事。眼睛感知蓝色部分的差异远小于红色部分的差异。因此，除非您想要了解很多关于色彩空间和视觉模型的知识，否则最好从颜色选择器中选择颜色，而不是尝试计算它们。

Answer 3

检查此this链接将显示如何建立两种十六进制颜色之间的差异。希望这能帮助你。

计算，差异，颜色十六进制

3 个答案: