JSFiddle - React, Tailwind, and code Playground

HTML

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

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

<input type="color" id="foo" />

CSS

body {background: lightblue;padding: 20px;}
pre {color: black}
img {position: relative;}

JavaScript

$(function() {
    
    $('img').mousemove(function(e) {
        
        function rgbToHex(pixelData) {
        var r = pixelData[0];
        var g = pixelData[1];
        var b = pixelData[2];
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
        
        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;
        console.log(rgbToHex(pixelData));
        $('#foo').val('#'+rgbToHex(pixelData));
        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);
        
        
    });
    
    
    
});