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
EyeDropperobject 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
sRGBHexproperty. 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
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>