JSFiddle - React, Tailwind, and code Playground

by David Simpson

HTML

<script src="https://lokeshdhakar.com/projects/color-thief/js/color-thief.min.js"></script>
<script src="https://lokeshdhakar.com/projects/color-thief/js/jquery.min.js"></script>
<img id="logo" src=""
  alt="" />

<div id="palette">
</div>
</div>

CSS

body {
  text-align: center;
}

img {
  margin: 30px 0;
}

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;
  border: 1px solid #ccc;
}

JavaScript

$(function() {

  var colorThief = new ColorThief();
  var palette = colorThief.getPalette(document.getElementById('logo'), 3);

  palette = [...palette, [255, 255, 255],
    [0, 0, 0, 0]
  ];
  
  console.log(' palette', palette)

  palette.map(item => {
    return $('#palette').append(`<span style="background-color: rgb(${item[0]} ${item[1]} ${item[2]} )"></span>`);
  })

});