EyeDropper API

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.

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).

• EyeDropper Experimental

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