Javascript has an Eyedropper API for selecting colors.
The process for creating an eyedropper color picker is pretty straightforward:
const eyeDropper = new EyeDropper();
eyeDropper
.open()
.then((result) => alert("Selected color: " + result.sRGBHex))
The open()
method of the EyeDropper object will return a promise waiting for the user to click on a color.
The returned result
just contains the sRGBHex
property that we will use to show the selected color.
And the interesting part is that you can select colors also from outside the browser window.
Testing for the support of the Javascript API eyedropper
Currently the Eyedropper API [only works] in Chrome, Edge, and Opera. No support yet in Firefox in Safari.
So, be a sure test for the browser support of this feature before using it:
const supportEyedropAPI = () => ('EyeDropper' in window)
const openEyedrop = ()=> {
if (!supportEyedropAPI()) {
return alert("EyeDropper API not supported")
}
const eyeDropper = new EyeDropper();
// rest of the code here
}
Closing the Javascript eyedropper with AbortController
By default, the eyedropper tool will be closed when the user hits the ESC key.
If you want to have programmatic control over when the eyedropper is closed you can use the Javascript AbortController interface.
const eyeDropper = new EyeDropper();
const abortController = new AbortController();
// use abortController.abort() to programmatically close the eyeDropper
eyeDropper
.open({ signal: abortController.signal })
.then((result) => alert("Selected color: " + result.sRGBHex))
Handling errors with the catch() method
If you cancel the selection before picking a color you may get the below error:
AbortError: Failed to execute 'open' on 'EyeDropper': The user canceled the selection.
We can use the promise catch()
method to handle this message (and other errors as well) :
eyeDropper
.open({ signal: abortController.signal })
.then((result) => { //... })
.catch((err) => { // log or take action on err})
Checkout here the full codepen used in this Javascript eyedropper example. Happy coding!
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.