W3cubDocs

/Web APIs

EyeDropper API

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The EyeDropper API provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.

Concept

Creative applications often allow users to sample colors from drawings or shapes in the application to reuse. Web applications can use the EyeDropper API to provide a similar eyedropper mode, provided by the browser.

Using the API, a web application can start the eyedropper mode. Once started, the cursor changes to indicate to the user that the mode is active. The user can then either select a color from anywhere on the screen, or dismiss the eyedropper mode by pressing Escape.

Security and privacy measures

To prevent malicious websites from getting pixel data from a user's screen without them realizing, the EyeDropper API implements the following measures:

  • The API doesn't let the eyedropper mode start without user intent. The EyeDropper.prototype.open() method can only be called in response to a user action (like a button click).
  • No pixel information can be retrieved without user intent again. The promise returned by EyeDropper.prototype.open() only resolves to a color value in response to a user action (clicking on a pixel). So the eyedropper cannot be used in the background without the user noticing it.
  • To help users notice the eyedropper mode more easily, it is made obvious by browsers. The normal mouse cursor disappears after a short delay and a magnifying glass appears instead. There is also a delay between when the eyedropper mode starts and when the user can select a pixel to ensure the user has had time to see the magnifying glass.
  • Users are also able to cancel the eyedropper mode at any time (by pressing the Escape key).

Interfaces

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
EyeDropper 95 95 No No 81 No No No No No No No
EyeDropper_API 95 95 No No 81 No No No No No No No
open 95 95 No No 81 No No No No No No No
secure_context_required 96 96 No No 82 No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API