JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image" src="/img/logo.png">

<pre id="output"></pre>

CSS

body {
  background: lightblue;
  padding: 20px;
}

pre {
  color: black
}

img {
  position: relative;
}

JavaScript

img = document.getElementById("image")
output = document.getElementById("output")

img.onmousemove = function(e) {

  if (!this.canvas) {
    this.canvas = $('<canvas />')[0];
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
  }

  var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
  
  output.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];


};