The Blog Image

Web

Picking colors straight on the browser

7/2/2024

Eye Dropper API

Eye Dropper API lets users pick a color from their screen, even if it’s outside of the browser window. Straight to the point, you can use it like this

const eyeDropper = new EyeDropper()

eyeDropper.open().then(color => {
  console.log("Picked color:", color)
})

When the open method is called, a user will get a dropper like this.

Dropper

And the output will be like this

"Picked color: {sRGBHex: '#6cb8ff'}"

Limitations

Since the Eye Dropper API is an expermiental API, it is not widely supported for now. Also, for the security, you can’t call the open method without any user action (like the Clipboard API).

References

https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API