JSFiddle - React, Tailwind, and code Playground

HTML

<div id="palette" class="containerSingle"></div>
<div id="tries" class="containerSingle"></div>

<div id="fluid-test-source" class="containerSingle"></div>
<div id="fluid-test-result" class="containerSingle"></div>

<canvas id="cancan" width="400" height="300">Canvas Blue Goat</canvas>

CSS

div.quad {
    width: 10px;
    height: 10px;
}

.containerSingle {
    margin: 2px;
    float: left;
}

.container {
    margin: 0;
    margin-top: 2px;
    float: left;
}

JavaScript

function convertRGBArrayToObjects(arr) {
    var result = [];
    arr.forEach(function(el){
        result[result.length] = {
            R: el[0],
            G: el[1],
            B: el[2]
        }
    });
    return result;
}

function HSLToRGB(hsl) {
    var H = hsl.H,
        S = hsl.S,
        L = hsl.L,
        R, G, B, _1, _2;
	function Hue_2_RGB(v1, v2, vH) {
		if (vH < 0) vH += 1;
		if (vH > 1) vH -= 1;
		if ((6 * vH) < 1) return v1 + (v2 - v1) * 6 * vH;
		if ((2 * vH) < 1) return v2;
		if ((3 * vH) < 2) return v1 + (v2 - v1) * ((2 / 3) - vH) * 6;
		return v1;
	}
	if (S == 0) { // HSL from 0 to 1
		R = L * 255;
		G = L * 255;
		B = L * 255;
	} else {
		if (L < 0.5) _2 = L * (1 + S);
		else _2 = (L + S) - (S * L);
		_1 = 2 * L - _2;
		R = 255 * Hue_2_RGB(_1, _2, H + (1 / 3));
		G = 255 * Hue_2_RGB(_1, _2, H);
		B = 255 * Hue_2_RGB(_1, _2, H - (1 / 3));
	}
	return {
		R: Math.round(R),
		G: Math.round(G),
		B: Math.round(B)
	};
};

function generateBasePalette() {
    var arr = [
        // ±1
        [254,  0,  1],
        [  0,  1,254],
        [  1,254,  0],
        
        // ±4
        [251,  0,  4],
        [  0,  4,251],
        [  4,251,  0],
        
        // ±16
        [241,  0, 16],
        [  0, 16,241],
        [ 16,241,  0],

        // ±64
        [191,  0, 64],
        [  0, 64,191],
        [ 64,191,  0],
        
        // ±128 (cube center)
        [128,  0,128],
        [  0,128,128],
        [128,128,  0],
        
        // 4 bit palette 
        // without red,gree,blue, olive, purple, teal
        // which already exist
        [  0,  0,  0],
        [255,255,255],
        //[255,  0,  0],
        //[  0,255,  0],
        //[  0,  0,255],
        [255,255,  0],
        [  0,255,255],
        [255,  0,255],
        
        [191,191,191],
        [128,128,128],
        [ 64, 64, 64], // additional
        
        [128,  0,  0],
        [  0,128,  0],
        [  0,  0,128],
        //[128,128,  0],
        //[128,  0,128],
  ...