New EyeDropper Web API

defite

Nikita Makhov

Posted on September 3, 2021

New EyeDropper Web API

So, there is new cool Web API which currently is in draft state, but has all chances to be released in all modern browsers. EyeDropper lets you pick colors not only in your browser, but in other windows, which is cool for online editors like Figma, for example.

You can look at specs here and here.

To try new API we need to download Chrome Canary (the exact support is starting from Chrome 95 version).

First, let's make classic check for Eyedropper support:

if (window.EyeDropper == undefined) {
    console.error('EyeDropper API is not supported on this platform');
}
Enter fullscreen mode Exit fullscreen mode

This will ensure, that we have support of this feature and can go on.

Now, time for magic 🪄

await new EyeDropper().open()
Enter fullscreen mode Exit fullscreen mode

Alt Text

To be more specific, I've prepared a little demo of how this might work.

💖 💪 🙅 🚩
defite
Nikita Makhov

Posted on September 3, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

New EyeDropper Web API
todayilearned New EyeDropper Web API

September 3, 2021