Eyedropper to get HEX color code using mouse pointer

December 1, 2017 12:44 pm by ATS Staff

Following code shows Eyedropper to get HEX color code using mouse pointer:

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'subject.jpg';
        context.drawImage(img, 0, 0, 400, 400);
    };

    function findPos(obj){
        var current_left = 0, current_top = 0;
        if (obj.offsetParent){
            do{
                current_left += obj.offsetLeft;
                current_top += obj.offsetTop;
            }while(obj = obj.offsetParent);
            return {x: current_left, y: current_top};
        }
        return undefined;
    }

    function rgbToHex(r, g, b){
        if (r > 255 || g > 255 || b > 255)
            throw "Invalid color component";
        return ((r << 16) | (g << 8) | b).toString(16);
    }

    jQuery('#myCanvas').click(function(e){
        var position = findPos(this);
        var x = e.pageX - position.x;
        var y = e.pageY - position.y;
        var coordinate = "x=" + x + ", y=" + y;
        var canvas = this.getContext('2d');
        var p = canvas.getImageData(x, y, 1, 1).data;
        var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
        jQuery('#color-box').css('background-color', hex);
        jQuery('#hex-box').text(hex);
    });

</script>
<img src="subject.jpg" style="display: none;" />
<div style="float: right;" id="hex-box"></div>
<div style="width: 300; height: 300px; float: right; border: 1px solid #dddddd;" id="color-box"></div><br />