JSFiddle - React, Tailwind, and code Playground

HTML

<li data-thumbnailPath="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-url="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-thumbnailOverlayColor="">
    <div>
        <p class="gallery1DecHeader">First description</p>
    </div>
</li>

JavaScript

var liIterator = document.getElementsByTagName("li");

for (var i = 0; i < liIterator.length; i++) {
 var img = new Image();
    img.src = liIterator[i].dataset.thumbnailPath;
    var rgb = new ColorFinder().getMostProminentColor(img);
    liIterator[i].setAttribute("data-thumbnailOverlayColor", rgbToHex(rgb.r, rgb.g, rgb.b));
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function ColorFinder(colorFactorCallback) {
  this.callback = colorFactorCallback;
  this.getMostProminentColor = function(imgEl) {
    var rgb = null;
    if (!this.callback) this.callback = function() { return 1; };
    var data = this.getImageData(imgEl);
    rgb = this.getMostProminentRGBImpl(data, 6, rgb, this.callback);
    rgb = this.getMostProminentRGBImpl(data, 4, rgb, this.callback);
    rgb = this.getMostProminentRGBImpl(data, 2, rgb, this.callback);
    rgb = this.getMostProminentRGBImpl(data, 0, rgb, this.callback);
    return rgb;
  };

  this.getImageData = function(imgEl, degrade, rgbMatch, colorFactorCallback) {
    
    var rgb,
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height, key,
        i = -4,
        db={},
        length,r,g,b,
        count = 0;
    
    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);
    
    try {
      data = context.getImageData(0, 0, width, height);
    } catch(e) {
      /* security error, img on diff domain */
      return null;
    }

    length = data.data.length;
    
    var factor = Math.max(1,Math.round(length/5000));
    var result = {};
    
    while ( (i +=...