How Can I Establish The Difference Between Two Hex Colours?
I need to be able to extract the different between two hex colours, represented itself as a hex colour, in order to combine them at a later point using LESS. Ideally, this would wo
Solution 1:
If you want a full Javascript solution :
functionparseHexColor(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;
}
};
functioncolorDifference(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);
}
};
Try yourself :
colorDifference('#FFFFFF', '#AABBCC'); // returns : "#554433"
Solution 2:
In LESS you can safely perform calculations on colors, so combining two is easy as this:
{
color: #ff0000 + #00ff00;
}
or even
{
color: red + green;
}
EDIT:
Similarly you are able to get the difference between two colors by mere subtracting them and storing the difference in a LESS variable for later.
@difference:#ffff00 - #ff0000;
should give you #00ff00
as a result.
Post a Comment for "How Can I Establish The Difference Between Two Hex Colours?"