JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div id="preview"></div>

<div id="colors">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="black"></div>
  <div class="white"></div>
</div>

CSS

#preview {
   height: 200px; 
   background-color: white;
}
#preview.white {
  color: white;
}
#colors > div {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.red {
  background-color: rgb(255, 0, 0);
}
.green {
  background-color: rgb(0, 255, 0);
}
.blue {
  background-color: rgb(0, 0, 255);
}
.black {
  background-color: rgb(0, 0, 0);
}
.white {
  background-color: rgb(255, 255, 255);
}

JavaScript

function parseRGB(rgb) {
  var result = rgb.match(/rgb[a]?\((\d+), (\d+), (\d+)\)/);
  return result.slice(1);
}
function mixColor(newColors) {
  var preview = document.querySelector('#preview');
  var curColors = parseRGB(getComputedStyle(preview).backgroundColor);
  var hexColor = '#';
  for (var i = 0; i < 3; i++) {
    curColors[i] *= 0.9;
    curColors[i] += newColors[i] * 0.1;
    curColors[i] = Math.round(curColors[i]);
    if (curColors[i] < 16)
      hexColor += '0';
    hexColor += curColors[i].toString(16);
  }
  preview.style.backgroundColor = 'rgb(' + curColors[0] + ', ' + curColors[1] + ', ' + curColors[2] + ')';
  preview.innerText = hexColor;
  preview.classList.toggle('white', curColors[0] + curColors[1] + curColors[2] < 127 * 3);
  
}

document.querySelectorAll('#colors > div').forEach(d => {
  d.addEventListener('click', function(e) {
    mixColor(parseRGB(getComputedStyle(e.target).backgroundColor));
  });
});