Eye Dropper
The EyeDropper API allows users to catch sample colors from their screen with an eyedropper tool.
Unlike <input type="color">
on Chromium-based Desktop browsers, this API offers a simple interface to pick the color of the entire device screen with a standard API.
API glimpse
const eyeDropper = new EyeDropper()
- Instantiates an
EyeDropper
object to be used to pick a color. eyeDropper.open()
- Return a promise that resolves to an object that gives access to the selected color (in hexadecimal sRGB format) with the
sRGBHex
property. eyeDropper.open({ signal: abortController.signal })
- Passing an
AbortSignal
, the eyeDropper will be aborted when the AbortSignal'sabort()
method is called.
Live Demo
Click on the image below to activate the dropper
![](/images/cat.jpg)
The hex color of the selected pixel is ???
-
// Create an EyeDropper object let eyeDropper = new EyeDropper(); // Enter eyedropper mode let icon = document.getElementById("eyeDropperIcon") let color = document.getElementById("colorCode") // You may use the dropper only on the cat! icon.addEventListener('click', e => { eyeDropper.open() .then(colorSelectionResult => { // returns hex color value (#RRGGBB) of the selected pixel color.innerText = colorSelectionResult.sRGBHex; }) .catch(error => { // handle the user choosing to exit eyedropper mode without a selection }); });
-
<div class="column"> <p>Click on the image below to activate the dropper</p> <img id="eyeDropperIcon" src="/images/cat.jpg"/> <p>The hex color of the selected pixel is <b><span id="colorCode">???</span></b></p> </div>