如何確定兩種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顏色之間的差異？

回答

相關問題