#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
}

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

> { sRGBHex: "#433633" }

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!