<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;text-align: center;" id="dis"></div>
    <div style="width: 90px; height: 90px; margin: 10px;" id="c2"></div>
    <div style="width: 90px; height: 90px; margin: 10px;" id="c3"></div>
    <div style="width: 90px; height: 90px; margin: 10px;" id="c4"></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 b3 = document.getElementById("c3");
    let b4 = document.getElementById("c4");
    let display = document.getElementById("dis");
    function go() {
        let color1, color2;
        color1 = colorgen.randomRGB();
        color2 = colorgen.randomOffset(color1, 50);
        color3 = colorgen.randomOffset(color1, 50);
        color4 = colorgen.randomOffset(color1, 50);
        b1.style.backgroundColor = `rgb(${color1[0]}, ${color1[1]}, ${color1[2]})`;
        b2.style.backgroundColor = `rgb(${color2[0]}, ${color2[1]}, ${color2[2]})`;
        b3.style.backgroundColor = `rgb(${color3[0]}, ${color3[1]}, ${color3[2]})`;
        b4.style.backgroundColor = `rgb(${color4[0]}, ${color4[1]}, ${color4[2]})`;
        display.innerHTML = "---max offset 50---> <br> Click to change";
    }
    go();
    container.onclick = go;
</script>