JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<input type="color" id="c1" value="#ff0000">
    
<input type="color" id="c2" value="#ffff00">
    
<button type="button" id="mix">Mix these</button>
    
<hr>
<div id="result">
    <p id="c1p">Color1</p>
    <p id="c2p">Color2</p>
</div>

JavaScript

var hexToDec = function(hex){
    return parseInt(hex, 16);
}

var decToHex = function(dec){
    var pad = '';
    if (dec < 16){
       pad = '0';
    }
    return pad + dec.toString(16);
}

var rawToArray = function(color){
    var hexArray = [
        color.substring(1, 3),
        color.substring(3, 5),
        color.substring(5, 7)];
    return _.map(hexArray, function(h){ return hexToDec(h)});
}

var arrayToRaw = function(dArray){
    var temp = _.map(
        dArray, function(d){ return decToHex(d) }
    );
    return "#"+temp.join('');
}

var decToSpace = function(dec){
   //decimal between 0 and 255 map to closed vector space channels
   var perc = dec/255;
   perc = Math.max(0.1, perc);
   perc = Math.min(.9, perc);
   numer = perc - .5;
   denom = .5 - Math.abs(perc - .5);
   if (denom != 0){
     return numer/denom;
   } else {
       if (numer >= 0) {
          return 70;
       }
       return -70;
   }
}

var spaceToDec = function(space){
   var res = .5;
   var denom = 2 + 2*Math.abs(space);
   var numer = space;
   res = res + numer/denom;
   res = Math.round(255*res);
   res = Math.min(255, res);
   res = Math.max(0, res);
   return res;
}

var arrayAdd = function(c1, c2){
    var c1s = _.map(c1, decToSpace);
    var c2s = _.map(c2, decToSpace);
    console.log("c1s:"+c1s.join('-'));
    console.log("c2s:"+c2s.join('-'));
    var result = _.map(_.range(3), function(i){
        return spaceToDec(c1s[i] + c2s[i]);
    });
    console.log(result.join("-"));
    return result;
}

var mixColors = function(c1, c2){
    var c1d = rawToArray(c1);
    var c2d = rawToArray(c2);
    var result = arrayAdd(c1d, c2d);
    return arrayToRaw(result);
}

$("#mix").click(function(){
    var c1 = $("#c1").val();
    var c2 = $("#c2").val();
    $("#c1p").css("color", c1);
    $("#c2p").css("color", c2);
    $("#result").css("background-color", mixColors(c1, c2));
});