OS Integration

EyeDropper

Probing…

EyeDropper is a web platform capability in the OS Integration category. Pick a color from anywhere on the screen. Supported in Chromium 95+; not available in Firefox and Safari. Requires a secure context (HTTPS or localhost) and a user gesture such as a click or tap.

Secure contextUser gesture

Try it

Loading demo…

Code

const eyeDropper = new EyeDropper()
const { sRGBHex } = await eyeDropper.open() // needs a user gesture
console.log(sRGBHex) // e.g. '#3b82f6'

Browser support

Chromium
95
Firefox
No
Safari
No

Frequently asked questions

Which browsers support EyeDropper?

Supported in Chromium 95+; not available in Firefox and Safari.

Does EyeDropper require HTTPS?

Yes. EyeDropper needs a secure context, so it only works over HTTPS (or on localhost during development).

What is EyeDropper used for?

Pick a color from anywhere on the screen.

Can I try EyeDropper in my browser?

Yes. shwcs.net runs a live EyeDropper demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.

MDN reference ↗ Specification ↗