JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<img id="my-image" src="/img/logo.png">
<!-- only local images -->
<h1>colors</h1>
</body>

CSS

div {
  height: 20px;
  width: 70px;
  float: right;
  font-size: 9px;
  color: #FFF;
}

JavaScript

var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

var rect = img.getBoundingClientRect();

var colors = [];

for (let y = rect.top; y <= rect.left; y++) {

  for (let x = rect.left; x <= rect.right; x++) {
    var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
    var rgb = "rgb(" + pixelData[0] + ", " + pixelData[1] + ", " + pixelData[2] + ")"
    if (!colors.includes(rgb)) {
      colors.push(rgb);
    }

  }

}

console.log(colors)

colors.map(o=>{
let div = document.createElement("div");
div.setAttribute("style","background-color:"+o+";");
div.innerHTML = o;
document.body.appendChild(div);
})