EyeDropper

Want more browser support for this feature? Tell us why.

: (HTTPS)

Experimental:

EyeDropper

EyeDropper(): EyeDropper

EyeDropper

EyeDropper.open()

Escape

HTML

html

<button id="start-button"></button> <span id="result"></span>

JavaScript

document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      " EyeDropper API ";
    return;
  }

  const eyeDropper = new EyeDropper();

  eyeDropper
    .open()
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });
});

Escape

HTML

html

<button id="start-button"></button> <span id="result"></span>

JavaScript

document.getElementById("start-button").addEventListener("click", () => {
  const resultElement = document.getElementById("result");

  if (!window.EyeDropper) {
    resultElement.textContent =
      " EyeDropper API ";
    return;
  }

  const eyeDropper = new EyeDropper();
  const abortController = new AbortController();

  eyeDropper
    .open({ signal: abortController.signal })
    .then((result) => {
      resultElement.textContent = result.sRGBHex;
      resultElement.style.backgroundColor = result.sRGBHex;
    })
    .catch((e) => {
      resultElement.textContent = e;
    });

  setTimeout(() => {
    abortController.abort();
  }, 2000);
});


EyeDropper API # eyedropper-interface

MDN

MDN 2023111

GitHub