Chromium Eye Dropper Browser Extension

Leveraging Chromium’s built-in EyeDroper API —which I wrote about earlier this yearPatrick Brosset created an extension for Chromium that allows you to pick a color from anywhere on your screen.

In an accompanying blogpost he also explains how he built it:

Back when I worked on the [EyeDroper API] article, I got interested in whether the API would also work in browser extensions, which it does! So I built a small extension that lets you grab colors from your screen, and store them locally for later reuse.

Chromium EyeDropper Extension →
Chromium EyeDropper Extension Source (GitHub) →
How I built an Eye Dropper browser extension →

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

Mid-August the WICG published a (unofficial) specification for a Native Eye Dropper — a tool you can use to get the color from the pixel that’s underneath the cursor — on the web.

Let’s take a look …



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
        .then(colorSelectionResult => {
            // returns hex color value (#RRGGBB) of the selected pixel
        .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

💡 As pointed out by reader Šime Vidas it’s worth nothing that you’re not limited to picking colors from the page itself, but from anywhere on your screen — even outside the browser window.

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.



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

Update 2021.09.01

Based on the contents of this post, Hakim El Hattab set out to integrate it into (the wonderful) Slides he’s been building:

Very nice!


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:


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:


🔥 Like what you see? Want to stay in the loop? Here's how:

🗣 This post originally was a set of tweets.

HSL: a color format for humans

Over at the Cloud Four blog, Paul Hebert digs into HSL colors

Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color.

Included are some nice CodePen-hosted Color Pickers, such as this one:

See the Pen HSLA Color Picker using Custom Props by Paul Hebert (@phebert) on CodePen.

HSL: a color format for humans →

☝️ Remember that nowadays you can drop the Functional Color Notation (e.g. hsla(180, 50%, 50%, 100%)) and use the Space-Separated Color Notation (e.g. hsla(180 50% 50% / 100%)) instead. It’s supported in all major browsers.