EyeDropper API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

TheEyeDropper 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 theEyeDropper 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 pressingEscape.

Security and privacy measures

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

The API doesn't let the eyedropper mode start without user intent. TheEyeDropper.open() method can only be called in response to a user action (such as a button click).
No pixel information can be retrieved without user intent. The promise returned byEyeDropper.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 theEscape key).