Pick Colors from websites your entire screen with the JavaScript EyeDropper API

~

Usage

The proposal is pretty straightforward:

This API enables authors to use a browser supplied eyedropper in the construction of custom color pickers.

It describes an EyeDropper and a ColorSelectionResult which you use as follows:

// Create an EyeDropper object
const eyeDropper = new EyeDropper();

document.getElementById("eyedropperButton").addEventListener('click', e => {
    // Enter eyedropper mode
    eyeDropper.open()
        .then(colorSelectionResult => {
            // returns hex color value (#RRGGBB) of the selected pixel
            console.log(colorSelectionResult.sRGBHex);
        })
        .catch(error => {
            // handle the user choosing to exit eyedropper mode without a selection
        });
});

Upon clicking the button in the example above, an EyeDropper will open. After clicking, the color underneath will be captured and its outcome is a ColorSelectionResult, of which you can current get the SRGB Hex Code via colorSelectionResult.sRGBHex

Live updating the color value as you move the cursor is currently not specced — it is, after all, a very young spec. This is considered a limitation and is being discussed in this GitHub Issue.

~

Demo

See the Pen
EyeDropper API Demo by Bramus (@bramus)
on CodePen.

~

Browser Support

Whilst the API is still unofficial, it’s already supported in Chromium 95 (current Canary). Other Browsers (Firefox, Safari) have no support for it (yet). Relevant Issues to track:

• Chromium: Issue #897309
• Firefox: Issue #1728527
• Safari: Issue #229755

~

Extra: Quick one-liner

To open the EyeDropper with just one line of code you can use this snippet:

await new EyeDropper().open();

Handy for launching it from the Console, as demonstrated in the video below:

~

To help spread the contents of this post, feel free to retweet the announcement tweet:

Pick colors from websites with the EyeDropper API

🔗 https://t.co/sknbodhYR4

🏷 #colors #javascript pic.twitter.com/coLaiymluu

— Bram.us (@bramusblog) September 1, 2021

~