JavaScript EyeDropper API Example

by Adi Jaya

HTML

<button id="button">CLick Me</button>

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

<hr>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility" target="_blank">Browser Support</a>

CSS

#div {
    height: 100px;
    width: 100px;
}

JavaScript

var btn = document.querySelector("#button");
var div = document.querySelector("#div");

btn.addEventListener("click", function() {
    if (window.EyeDropper) {
        var eyeDrop = new EyeDropper();
        eyeDrop.open().then(result => {
            console.log(result.sRGBHex);
            div.style.background = result.sRGBHex;
        }).catch(error => {
            console.log(error);
        });
    } else {
        console.log("Oops, not supported")
    }
});