DEV Community

Cover image for #LearnedToday: EyeDropper Browser API
Daniel Zotti
Daniel Zotti

Posted on • Originally published at danielzotti.it

#LearnedToday: EyeDropper Browser API

How to open a color picker natively in the Browser

const eyeDropper = new EyeDropper();

try {
  const colorSelectionResult = await eyeDropper.open(); // It will wait until the user selects a color

  // This part is executed once the user has selected the color
  console.log(colorSelectionResult)
}
catch(ex) {
  // User has canceled the selection
}
Enter fullscreen mode Exit fullscreen mode

The result is an object and this will be the result:

> { sRGBHex: "#433633" }
Enter fullscreen mode Exit fullscreen mode

Docs

If you want to explore other features of EyeDropper API you can browse
the MDN Doc.

Browser support

Note: this API is marked as "experimental" as of 20th August 2023 and it seems to work on last versions of Chrome
and Edge only.

If you want to check whether your browser supports this feature, you can
browse caniuse.com to have more details.

Demo

Theory is useless without practice, thus I created
a stackblitz project to show how it works!

Top comments (0)