files/en-us/web/api/eyedropper/index.md
{{securecontext_header}}{{APIRef("EyeDropper API")}}{{SeeCompatTable}}
The EyeDropper interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen.
EyeDropper instance.The EyeDropper interface doesn't inherit any methods.
This example shows how to open an eyedropper tool and wait for the user to either select a pixel from the screen, or press <kbd>Escape</kbd> to cancel the eyedropper mode.
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"Your browser does not support the 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;
});
});
{{EmbedLiveSample("Opening the eyedropper tool and sampling a color")}}
This example shows that the eyedropper mode can also be aborted before the user has selected a color or pressed <kbd>Escape</kbd>.
<button id="start-button">Open the eyedropper</button> <span id="result"></span>
document.getElementById("start-button").addEventListener("click", () => {
const resultElement = document.getElementById("result");
if (!window.EyeDropper) {
resultElement.textContent =
"Your browser does not support the 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);
});
{{EmbedLiveSample("Aborting the eyedropper mode")}}
{{Specifications}}
{{Compat}}