JSFiddle - React, Tailwind, and code Playground

by fredrik

HTML

<h2 id="total-colors"></h2>
<h2 id="median-colors"></h2>

JavaScript

var $ = function (id) {
        return document.getElementById(id);
    },
    prop,
    c = 0,
    n = 0,
    colors = { '#ffffff': '',
      '#2f2100': '',
      '#d2d2d2': '',
      '#ff6d2f': '',
      '#e5622a': '',
      '#f2f2f2': '',
      '#43ba7a': '',
      '#ff0000': '',
      '#2da062': '',
      '#157843': '',
      '#e9e9e9': '',
      '#999999': '',
      '#0099d2': '',
      '#e9e9e8': '',
      '#e6e6e6': '',
      '#f9f9f9': '',
      '#00aeef': '',
      '#c1c1c1': '',
      '#dfdfe1': '',
      '#efefef': '',
      '#eeeeee': '',
      '#fafafa': '',
      '#e9e9e9': '',
      '#f6c70e': '',
      '#3eb475': '',
      '#000000': '',
      '#e53238': '',
      '#0064d2': '',
      '#fdcb31': '',
      '#86b817': '',
      '#573b94': '',
      '#ff8200': '',
      '#009f81': '',
      '#00acec': '',
      '#f8be2f': '',
      '#efb608': '',
      '#906a12': '',
      '#bfbfbf': '',
      '#796e65': '',
      '#3d3935': '',
      '#f7f7f7': '',
      '#282828': '',
      '#111111': '',
      '#999999': '',
      '#3f3f3f': '',
      '#d7d7d7': '',
      '#ff9999': '',
      '#b9e0cb': '',
      '#cecece': '',
      '#333333': '',
      '#2a8e58': '',
      '#4eafef': '',
      '#3b94ce': '',
      '#33729c': '',
      '#8a8a8a': '',
      '#e1e1e1': '',
      '#c7c7c7': '',
      '#d1d1d1': '',
      '#373737': '',
      '#399e68': '',
      '#6e7175': '',
      '#dbb212': '',
      '#888888': '',
      '#cccccc': '',
      '#adadad': '',
      '#ffefef': ''
    };

for (prop in colors) {
    if (colors.hasOwnProperty(prop)) {
        c += 1;
        n += parseInt(prop.substring(1, 7), 16);
    }
}

$('total-colors').innerHTML = 'Antal: ' + c;
$('median-colors').innerHTML = 'Snittfärg: #' + parseInt((n / c), 10).toString(16);
$('median-colors').style.color = '#' + parseInt((n / c), 10).toString(16);