JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="board" width="360" height="120"></canvas>

JavaScript

function InitPalette(colours, bits) {
    // Set colours
    for (var r = 0; r < bits; r++) {
        for (var g = 0; g < bits; g++) {
            for (var b = 0; b < bits; b++) {
                var rr = r * 255 / (bits - 1),
                    gg = g * 255 / (bits - 1),
                    bb = b * 255 / (bits - 1);
                                
                // Set the mid tone
                var mid = (rr * 30 + gg * 59 + bb * 11) / 100;

                // Tint the palette
                var r1 = ~~(((rr + mid * 1) / 2) * 230 / 255 + 10),
                    g1 = ~~(((gg + mid * 1) / 2) * 230 / 255 + 10),
                    b1 = ~~(((bb + mid * 1) / 2) * 230 / 255 + 10);
                            
                // Push RGB values into a single integer
                colours.push(r1 << 16 | g1 << 8 | b1);
            }
        }
    }
}

function DrawPalette(ctx, colours, width) {
    for(var i = 0; i < colours.length; i++) {
        var col = colours[i],
            b1 = col & 255,
            g1 = (col >> 8) & 255,
            r1 = (col >> 16) & 255;
        ctx.fillStyle = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
        ctx.fillRect((i % width) * 10, parseInt(i / width) * 10, 10, 10);
    }
}


var ctx = document.getElementById("board").getContext("2d"),
    colours = [];

InitPalette(colours, 6);
DrawPalette(ctx, colours, 36);