How to Use Eyedropper API

chrome api eyedropper api


This feature has been shipped since v95 in Chrome browser. This tool allows picking a color from the screen.

Eyedropper API status

Detecting the EyeDropper API

It can be done by checking this property in the window object:

if('EyeDropper' in window) {
  console.log('This browser has EyeDropper')

Eyedropper API available

Open EyeDropper mode

First of all, we need to create an instance of EyeDroper:

const eyeDropperInstance = new window.EyeDropper()

Then, we need to call an open method of this instance. It returns a Promise, so we need to use then with a callback or call open within async block with the await keyword. => {
  // color = { sRGBHex: "#<some-hex>" }

Eyedropper Example

You will see the picker on the screen. If you click in Eyedropper Mode you will get the color selection result. It’s an object with one field - sRGBHex and it contains a HEX-color as a string:

Eyedropper result

One interesting thing about the eyedropper is you can go outside the browser and pick any color:

Eyedropper Outside the browser

Exit from eyedropper and handle errors

To exit from the eyedropper mode you need to press the Esc button. You will see the error message in the Chrome console:

Uncaught (in promise) DOMException: The user canceled the selection.

To handle this message (other errors as well) we can use catch method:
	.then((res) => console.log(res))
	.catch((err) => console.log(`we have this, ${err}`))

Eyedropper Error

comments powered by Disqus