JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img style="display:none" id="original" width="300" height="200" />
</div>
<div>
    <section class="canvas">
        <canvas id="buffer" width="300" height="200"></canvas>
    </section>
    <section class="canvas">
        <canvas id="main"></canvas>
    </section>
    <section>
        <canvas id="palette" width="20" height="10"></canvas>
        <p>=></p>
        <canvas id="subpalette" width="20" height="10"></canvas>
    </section>
</div>

CSS

.canvas {
    float: left;
    margin: 5px;
}

JavaScript

'use strict';
var image = document.getElementById('original'),
    palettePanel = document.getElementById('palette'),
    subPalettePanel = document.getElementById('subpalette'),
    canvas = document.getElementById('main'),
    maxColors = 12,
    palette = [
         0x7F8FB1FF,
         0x000000FF,
         0x404c00FF,
         0xe46501FF,
         0x722640FF,
         0x40337fFF,
         0x666666FF,
         0x0e5940FF,
         0x1bcb01FF,
         0xbfcc80FF,
         0x333333FF,
         0x0033CCFF,
         0x66CCFFFF,
         0xFF6600FF,
         0x000033FF,
         0xFFCC00FF,
         0xAA0033FF,
         0xFF00FFFF,
         0x00FFFFFF,
         0x123456FF
     ],
      nearestColor = function (palette, r, g, b, a) {
            var rr, gg, bb, aa, color, closest,
                distr, distg, distb, dista,
                dist,
                minDist = Infinity;
            for (var i =  0; i < l; i++) {
                color = palette[i];
                rr = palette[i] >> 24 & 0xFF;
                gg = palette[i] >> 16 & 0xFF;
                bb = palette[i] >> 8  & 0xFF;
                aa = palette[i]       & 0xFF;
                
                if (closest === undefined) {
                    closest = color;
                }
                
                // compute abs value
                distr = Math.abs(rr - r);
                distg = Math.abs(gg - g);
                distb = Math.abs(bb - b);
                dista = Math.abs(aa - a);
                dist = (distr + distg + distb + dista * .5) / 3.5;
                
                if (dist < minDist) {
                    closest = color;
                    minDist = dist;
                }
            }
            
            return closest; 
     },
     subpalette = [],
     i, l = palette.length,
     r, g, b, a,
     img,
     size = 5,
     cols = palettePanel.width / size,
     drawPalette = function (p, palette) {
            var i, l = palette.length;
         
   ...