JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://html2canvas.hertzen.com/js/html2canvas.js"></script>
<script src="http://html2canvas.hertzen.com/js/jquery.plugin.html2canvas.js"></script>
<div id="content">
    <h1>Text</h1>
    <p style="color: #ff0000;">Some more text in the paragraph...</p>
    <img src="/img/logo.png" alt="">
</div>

<div id="color"></div>

CSS

canvas {
    cursor: crosshair;
}

#color {
    width: 20px;
    height: 20px;
    border: 1px solid;
    z-index: 100;
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: block !important;
}

JavaScript

$("body").on("mousemove", "canvas", function(e) {
    var data = this.getContext("2d").getImageData(e.offsetX, e.offsetY, 1, 1).data,
        arr = $.makeArray(data);
    $("#color").css("background-color", "rgba(" + arr.join(",") + ")");
});

$("#content").html2canvas();