如何确定两种 HEX 颜色之间的差异？答案

【问题标题】：How can I establish the difference between two HEX colours?如何确定两种 HEX 颜色之间的差异？
【发布时间】：2012-04-06 22:02:28
【问题描述】：

我需要能够提取两种十六进制颜色之间的差异，将自身表示为十六进制颜色，以便稍后使用 LESS 组合它们。

理想情况下，这将在 javascript 中工作

【问题讨论】：

你说要组合颜色是什么意思？
你试过什么？你到底有什么问题？十六进制只是一个数字表示，所以执行减法应该不是问题。
不是这样的。是三对。
结合，我的意思是把它们加在一起。 Less 允许您这样做。

标签： javascript colors hex less

【解决方案1】：

在 LESS 中，您可以安全地对颜色进行计算，因此将两者结合起来很简单：

{
    color: #ff0000 + #00ff00;
}

甚至

{
    color: red + green;
}

编辑：

同样，您只需将两种颜色相减并将差异存储在 LESS 变量中以备后用，即可获得两种颜色之间的差异。

@difference: #ffff00 - #ff0000;

结果应该给你#00ff00。

【讨论】：

我明白了，这就是为什么我需要从我拥有的颜色向后工作。假设我需要添加颜色 x 和 y 来制作颜色 z。我有 X 和 Z 的值

【解决方案2】：

如果您想要完整的 Javascript 解决方案：

function parseHexColor(c) {
  var j = {};

  var s = c.replace(/^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/, function(_, r, g, b) {
    j.red = parseInt(r, 16);
    j.green = parseInt(g, 16);
    j.blue = parseInt(b, 16);

    return "";
  });

  if(s.length == 0) {
    return j;
  }
};

function colorDifference(a, b) {
  var a = parseHexColor(a);
  var b = parseHexColor(b);

  if(typeof(a) != 'undefined' && typeof(b) != 'undefined') {
    return "#" + (a.red - b.red).toString(16) + (a.green - b.green).toString(16) + (a.blue - b.blue).toString(16);
  }
};

自己试试吧：

colorDifference('#FFFFFF', '#AABBCC'); // returns : "#554433"

【讨论】：

colorToJson 函数的名称具有误导性。它不会创建 JSON。
完全同意，请随意重写函数名:)
我建议将 Math.abs 添加到您的减色中，以确保您不会得到像 #-ff-ff-ff 这样的值