triadMixing

Color Gen JS Example - RandomRGB

Code

            
<div class="container" style="width: 100%; height: 100px; display: flex; justify-content: space-between;">
    <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="d" style="width: 100px; height: 100px;text-align: center;"></div>
    <div class="b" style="width: 100px; height: 100px;"></div>
</div>
<script src="../../../dist/colorgen.js"></script>
<script>
    let container = document.getElementsByClassName("container")[0];
    function go(){
        let blocks = container.getElementsByClassName("b");
        let colors = [colorgen.randomRGB(), colorgen.randomRGB(), colorgen.randomRGB()];
        for (let i = 0; i < colors.length; i++) {
            let hexc = colorgen.to24BitRGB(colors[i]).toString(16);
            while (hexc.length < 6) hexc = "0" + hexc;
            blocks[i].style.backgroundColor = "#" + hexc;
        }
        container.getElementsByClassName("d")[0].innerHTML = " ---> <br> Click to change";
        let mixedColor = colorgen.triadMixing(... colors, 0.5);
        let hexc = colorgen.to24BitRGB(mixedColor).toString(16);
        while (hexc.length < 6) hexc = "0" + hexc;
        blocks[3].style.backgroundColor = "#" + hexc;
    }
    go();
    container.onclick = go;
</script>

Result