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 GetColour(a, b, c, d) {
    function getIndex(d) {
        if (d < 0) return 255;
        var r = ~~(d / 100) % 10; // First digit
        var g = ~~(d / 10) % 10; // Second digit
        var b = d % 10; // Third digit
        return r * 36 + g * 6 + b;  // Plus fourth digit
    }
    return (getIndex(d) << 24) + (getIndex(c) << 16) + (getIndex(b) << 8) + (getIndex(a));
}

function DrawColours(ctx, colourInt, palette) {
    for(var i = 0; i < 4; i++) {
        var col = palette[(colourInt >> i * 8) & 255],
            b1 = col & 255,
            g1 = (col >> 8) & 255,
            r1 = (col >> 16) & 255;
        ctx.fillStyle = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
        ctx.fillRect(i * 10, 0, 10, 10);
    }
}


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

InitPalette(colours, 6);
DrawColours(ctx, GetColour(510, 0, 555, 55), colours);