How to create an eyedropper color selector tool with vanilla Javascript

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))

 eyedropper color selector tool with vanilla Javascript

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.
 eyedropper color selector tool with vanilla Javascript

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X