javascriptcolorshexless

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 work in javascript


Solution

  • If you want a full Javascript solution :

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

    Try yourself :

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