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

我需要能够提取两个十六进制颜色之间的差异，将其表示为十六进制颜色，以便稍后使用LESS将它们组合起来。如何确定两种HEX颜色之间的差异？

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

2012-03-22 Mild Fuzz

你是什么意思时，你说你想要的颜色结合？ – Guffa 2012-03-22 10:46:31

你有什么尝试？你到底有什么问题？十六进制只是一个数字表示，所以执行减法不应该是问题。 – 2012-03-22 10:47:34

这不是，但。这是三双。 – 2012-03-22 10:51:08

如果你想有一个完整的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"

来源

2012-03-22 11:08:31

'colorToJson'函数的名称具有误导性。它不创建JSON。 – 2012-03-22 11:25:53

完全同意，随意重写函数名称:) – 2012-03-22 11:32:58

我会建议在您的颜色减法中加入'Math.abs'，以确保您没有像'＃-ff-ff-ff'这样的值。 – Johannes 2014-03-13 00:34:03

在更短的，你可以放心地对颜色进行计算，所以将两个很容易，因为这：

{ 
    color: #ff0000 + #00ff00; 
}

甚至

{ 
    color: red + green; 
}

编辑：

同样，你可以得到两个区别通过仅减去它们并将差异存储在LESS变量中供以后使用。

@difference: #ffff00 - #ff0000;

应该给你#00ff00作为结果。

来源

2012-03-22 10:52:19

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

你也可以减去。查看我的编辑 – 2012-03-22 10:57:08

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

回答

相关问题