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.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 by EyeDropper.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

EyeDropper Experimental

The EyeDropper interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.

Specifications

Browser compatibility

See also

• Picking colors of any pixel on the screen with the EyeDropper API
• The EyeDropper API W3C/SMPTE Joint Workshop