JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

r g b palette.
<div id='palette'></div>
<p id='colours'></p>
<br><br><br>

CSS

.swatch {
    display: inline-block;
    width: 300px;
    }
    
/*
    
    0    =  00
    50   =  32
    100  =  64
    150  =  96
    200  =  c8
    250  =  fa
*/

JavaScript

let colours = [];


function rgbToHex(r,g,b) {
    if(g !== undefined){
        return Number(0x1000000 + r*0x10000 + g*0x100 + b).toString(16).substring(1);
    }else{
        return Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1);
    }
}

function drawPalette(){
    let html = ""; let cols = 0;
    let red = 0; let green = 0; let blue = 0;
    let a = 0; let b = 0; let c = 0;
    
    // 216 colours,  using 50 and 6.
    // Increase to 40 and 7 for 343 colours.

    for(a = 0; a < 6; a++){
        red = (a * 50);
        for(b = 0; b < 6; b++){
            green = (b * 50);
            for(c = 0; c < 6; c++){
                blue = (c * 50);
                
                html += "<br>red " + red + ", green " + green + ", blue " + blue + " ";
                let hex = rgbToHex(red, green, blue);
                html += "<div class='swatch' style='background-color:#" + hex + "'>#" + hex + "</div>" + cols;
                
                cols++;
                
                //let sr = simplifyRGB(red);
               // let gr = simplifyRGB(green);
               // let br = simplifyRGB(blue);
               // colours.push(sr+""+gr+""+br);
           
            }
        }
    }
    
    $("#palette").html(html);
    //$("#colours").html(cols + " colours<br>" + JSON.stringify(colours));
}

drawPalette();

function simplifyRGB(num){
        if(num >= 250){return 5;}
        else if(num >= 200){return 4;}
        else if(num >= 150){return 3;}
        else if(num >= 100){return 2;}
        else if(num >= 50){return 1;}
        return 0;
    }

let c =...