gradientRGB

Color Gen JS Example - RandomRGB

Code

            
<div class="container" style="display: flex; justify-content: space-between; width: 100%; height: 100px; margin-bottom: 10px;">
    <div class="d" style="width: 50px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
</div>
<div class="container" style="display: flex; justify-content: space-between; width: 100%; height: 100px; margin-bottom: 10px;">
    <div class="d" style="width: 50px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
</div>
<div class="container" style="display: flex; justify-content: space-between; width: 100%; height: 100px; margin-bottom: 10px;">
    <div class="d" style="width: 50px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
</div>
<div class="container" style="display: flex; justify-content: space-between; width: 100%; height: 100px; margin-bottom: 10px;">
    <div class="d" style="width: 50px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
    <div class="b" style="width: 100px;height: 100px"></div>
</div>
<script src="../../../dist/colorgen.js"></script>
<script>
    let containers = document.getElementsByClassName("container");
    function go() {
        let types = ["UR", "G", "JG", "GR"];
        let from, to;
        from = Math.random() * 0.5;
        to = 0.5 + from; 
        for (let i = 0; i < types.length; i++) {
            const type = types[i];
            const con = containers[i];
            containers[i].getElementsByClassName("d")[0].innerHTML = type + "<br> from: " + from.toFixed(3) + " to: " + to.toFixed(3);
            let blocks = con.getElementsByClassName("b");
            let n = blocks.length;
            let colors = colorgen.gradientRGB(n, from, to, type)
            for (let i = 0; i < blocks.length; i++) {
                let hexc = colorgen.to24BitRGB(colors[i]).toString(16);
                while (hexc.length < 6) hexc = "0" + hexc
                blocks[i].style.backgroundColor = "#" + hexc;
            }
        }
    }
    go();
    for (let i = 0; i < containers.length; i++) {
        containers[i].onclick = go;
    }
</script>

Result