JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<input type="color" id="color1">
<input type="color" id="color2">

JavaScript

var color1 = "";
var color2 = "";

function setColorOne(color) {
	color1 = color.toHexString();
    color1 = parseInt(color1.replace(/^#/, ''), 16);
    updateColors();
}
function setColorTwo(color) {
	color2 = color.toHexString();
    color2 = parseInt(color2.replace(/^#/, ''), 16);
    updateColors();
}

function updateColors(){
	console.log(color1);
    var color3 = Math.abs(color2 - color1).toString(16);
    document.body.style.background = "#" + color3;
}

$("#color1").spectrum({
    color: "#f00",
    preferredFormat: "hex",
    move: setColorOne,
    showInput: true
});
$("#color2").spectrum({
    color: "#00f",
    preferredFormat: "hex",
    move: setColorTwo,
    showInput: true
});

updateColors();