JSFiddle - React, Tailwind, and code Playground

HTML

<span> Background é setado para a cor predominante desta imagem: </span>
<img id="i"...

JavaScript

var rgb = getAverageRGB(document.getElementById('i'));
    document.body.style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';

function getAverageRGB(imgEl) {
    
    var blockSize = 5, //checa a cor à cada 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // para browsers com incompatibilidade
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0; //zera o contador
        
    if (!context) {
        return defaultRGB;
    }
    
    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
    
    context.drawImage(imgEl, 0, 0); //desenha a imagem cria o canvas
    
    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* gera um erro de segurança, se a imagem for de dominio diferente */alert('x');
        return defaultRGB;//retorna  a cor padrão
    }
    
    length = data.data.length; //tamanho do array dos dados da imagem
    
    while ( (i += blockSize * 4) < length ) {
        ++count; //incrementa o contador previamente zerado
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }
    
    // ~~ usado para arrendondar valores para baixo
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);
    
    return rgb;
    
}