What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Eye Dropper

The EyeDropper API allows users to catch sample colors from their screen with an eyedropper tool.

Unlike <input type="color"> on Chromium-based Desktop browsers, this API offers a simple interface to pick the color of the entire device screen with a standard API.

API glimpse

const eyeDropper = new EyeDropper()
Instantiates an EyeDropper object to be used to pick a color.
Return a promise that resolves to an object that gives access to the selected color (in hexadecimal sRGB format) with the sRGBHex property.
eyeDropper.open({ signal: abortController.signal })
Passing an AbortSignal, the eyeDropper will be aborted when the AbortSignal's abort() method is called.

Live Demo

Click on the image below to activate the dropper

The hex color of the selected pixel is ???

  • // Create an EyeDropper object
    let eyeDropper = new EyeDropper();
    // Enter eyedropper mode
    let icon = document.getElementById("eyeDropperIcon")
    let color = document.getElementById("colorCode")
    // You may use the dropper only on the cat!
    icon.addEventListener('click', e => {
        .then(colorSelectionResult => {
            // returns hex color value (#RRGGBB) of the selected pixel
            color.innerText = colorSelectionResult.sRGBHex;
        .catch(error => {
            // handle the user choosing to exit eyedropper mode without a selection
  • <div class="column">
      <p>Click on the image below to activate the dropper</p>
      <img id="eyeDropperIcon" src="/images/cat.jpg"/>
      <p>The hex color of the selected pixel is <b><span id="colorCode">???</span></b></p>


Get in touch