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!
Top comments (0)