The New EyeDropper API

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();
  .then(color => {

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.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182