DEV Community

Cover image for Introducing the EyeDropper API
Mads Stoumann
Mads Stoumann

Posted on

4 1

Introducing the EyeDropper API

The EyeDropper API has landed in Chrome 95. This API opens up a lot of possiblities. A user can select colors from images, create her/his own color-theme, and much more.

Let's built a simple, ultra-small ColorPicker, using this new API.

First, we need a form with a large selection-area, a hue-slider, and an output:

<form class="picker" id="app">
  <fieldset class="background" name="background">
    <div class="brightness"></div>
    <div class="saturation"></div>
  </fieldset>
  <label aria-label="hue">
    <input type="range" name="hue" max="360" value="0" data-blok="range">
  </label>
  <output name="hex" data-value="#ff0000"></output>
</form>
Enter fullscreen mode Exit fullscreen mode

The selection-area consists of a background with the main color, as well as saturation and lightness layers, which are gradients on top of that color:

Background with saturation and lightness

The hue-slider is a regular <input type="range">, styled with 12 color-stops (360 degrees / 12 = a stop every 30 degree):

Hue-slider

To update the hue as we drag the hue-slider, we need a bit of JavaScript, updating a simple custom property, --hue:

app.elements.hue.addEventListener('input', () => app.style.setProperty('--hue', app.elements.hue.valueAsNumber));
Enter fullscreen mode Exit fullscreen mode

Next, if the EyeDropper API is supported in the browser (currently only Chrome 95+), we'll add a click-listener to the selection-area:

if ('EyeDropper' in window) {
app.elements.background.addEventListener('click', pickColor)
}
Enter fullscreen mode Exit fullscreen mode

And finally, we'll invoke the EyeDropper API with the pickColor-function:

async function pickColor() {
  const ED = new EyeDropper();
  const result = await ED.open();
  app.style.setProperty('--hex', result.sRGBHex);
  app.elements.hex.dataset.value = result.sRGBHex;
}
Enter fullscreen mode Exit fullscreen mode

Now, try it out:

EyeDropper

And that's it! A ColorPicker with approx 200 bytes of JavaScript, when minified and gzipped.

In a real-life scenario, you'd probably add a “selection”-circle, listen for pointer-move-events etc., but this should get you started.

Here's a Codepen-demo:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up