colorDistance

Color Gen JS Example - RandomRGB

Code

            
<div style="display: flex; flex-direction:row; width:100%; height:100px; justify-content: space-between;" id="container">
    <div style="width: 90px; height: 90px; margin: 10px;" id="c1"></div>
    <div style="width: 120; height: 90px; margin: 10px; font-size: 20px;" id="dis"></div>
    <div style="width: 90px; height: 90px; margin: 10px;" id="c2"></div>
</div>
<script src="../../../dist/colorgen.js"></script>
<script>
    let container = document.getElementById("container");
    let b1 = document.getElementById("c1");
    let b2 = document.getElementById("c2");
    let display = document.getElementById("dis");
    function go() {
        let color1, color2;
        color1 = colorgen.randomRGB();
        color2 = colorgen.randomRGB();
        b1.style.backgroundColor = `rgb(${color1[0]}, ${color1[1]}, ${color1[2]})`;
        b2.style.backgroundColor = `rgb(${color2[0]}, ${color2[1]}, ${color2[2]})`;
        let distance = colorgen.colorDistance(color1, color2);
        display.innerHTML = "<- " + distance.toFixed(3).toString() + " -> <br> Click to change";
    }
    go();
    container.onclick = go;
</script>

Result