JSFiddle - React, Tailwind, and code Playground

by Alexey Zuev

HTML

<img id="image"...

CSS

img {
    float: left;
    margin-right: 10px;
}
#result {
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    line-height: 200px;
    text-align: center;
    font-weight: bold;
    color: #fff
}

JavaScript

var img = document.getElementById('image'),
    result = document.getElementById('result')
    canvas = document.createElement('canvas'),
    zone = canvas.getContext('2d'),
    offset = img.getBoundingClientRect();

canvas.width = img.width;
canvas.height = img.height;
zone.drawImage(img, 0, 0, img.width, img.height);

img.addEventListener('mousemove', function(e) {
    var data = zone.getImageData(e.clientX - (offset.left - pageXOffset), e.clientY - (offset.top - pageYOffset), 1, 1).data,
        rgb = data[0] + ',' + data[1] + ',' + data[2];
    result.style.background = result.textContent = 'rgb(' + rgb  + ')'; 
});