Days ago, Google Chrome included the Eye Dropper API. It is an easy API that serves as an alternative to the color picker or any non-native eye dropper. In some browsers, the color picker does not allow you to select an eye drop and in other browsers like Chrome and Edge, you have the option of an eyedropper but from inside the color picker.
This feature was implemented by Microsoft, so I expect the next update of the Edge Browser to include it. If you want more detailed information on the EyeDropper API, you can follow the documentation.
The advantage is that the EyeDropper allows you to pick the color of any element on the screen, including items that are outside your browser’s window.
How to use the EyeDropper API
As always, check if the browser supports it by using feature detection:
if(!window.EyeDropper) {
//Don’t support it
} else {
//Supports it
}
Then create an instance of the EyeDropper(), and call the open method on it that will activate the eyedropper and wait for the user to pick a color. When the user clicks on the element to pick the color, it will return an object with a sRGBHex as a property containing the value of the color.
let eyeDropper = new EyeDropper();
eyeDropper.open()
.then(color => {
console.log(color.sRGBHex);
});
You can see this short example of the EyeDropper API working on Chrome. Please make sure that you test it on a browser that supports it.