EyeDropper 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
catch(ex) {
  // User has canceled the selection

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

> { sRGBHex: "#433633" }


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" 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.


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