DEV Community

Cover image for New EyeDropper Web API
Nikita Makhov
Nikita Makhov

Posted on

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.

Discussion (0)