Modern creative tools often include an eyedropper so you can sample a color from an illustration and reuse it elsewhere. The EyeDropper API brings that same idea to the web: it lets a web app enter an “eyedropper mode” where a user can click any pixel on their screen—even outside the browser window—and return the selected color.
What it does
With the EyeDropper API, your app can:
- Start an eyedropper mode provided by the browser.
- Show a clear visual indicator that sampling is active (browsers typically swap the cursor for a magnifying-glass style UI).
- Let the user either: Pick a color by clicking a pixel, or Cancel by pressing Escape.
This makes it great for design tools, theme editors, drawing apps, and any UI that benefits from quick color sampling.
Security and privacy: why it’s designed this way
Sampling colors from the screen touches sensitive territory, so the API includes strong guardrails to prevent abuse:
- Requires user intent to start: EyeDropper.open() can only be called in response to a user action (like clicking a button).
- Requires user intent to return data: the promise returned by open() resolves only when the user clicks a pixel—so it can’t silently collect pixel info in the background.
- Obvious user experience cues: browsers make the mode visually clear (cursor changes, magnifier UI, and even a slight delay before selection is allowed).
- User can cancel anytime: pressing Escape dismisses eyedropper mode.
Availability notes you shouldn’t ignore
MDN flags the EyeDropper API as:
- Experimental
- Limited availability (not supported in some widely used browsers)
- Secure context only (available only over HTTPS) in supporting browsers
That means it’s best used with feature detection and a fallback UI for unsupported environments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eyedropper API Demo</title>
<link href="style.css" rel="stylesheet" />
<script src="eyedropperAPI.js" defer></script>
</head>
<body>
<div class="container">
<h1>EyeDropper API Demo</h1>
<p>Click the button to pick a color from anywhere on your screen!</p>
<!-- Button to trigger the EyeDropper -->
<button id="pickColorBtn">Pick a Color</button>
<!-- Area to display the selected color and its hex value -->
<div class="result-area">
<h2>Selected Color:</h2>
<div id="colorSwatch" class="color-swatch"></div>
<p>Hex Value: <span id="hexValue">N/A</span></p>
</div>
<p class="compatibility-note">
Note: This API is experimental and works primarily in Chromium-based browsers (Chrome, Edge, Opera) over HTTPS.
</p>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 500px;
width: 90%;
}
h1 {
color: #0056b3;
margin-bottom: 20px;
}
p {
margin-bottom: 25px;
line-height: 1.6;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 25px;
font-size: 1.1em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
.result-area {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.color-swatch {
width: 80px;
height: 80px;
border: 2px solid #ccc;
margin: 15px auto;
border-radius: 50%;
background-color: transparent;
/* Default state */
transition: background-color 0.3s ease;
}
#hexValue {
font-weight: bold;
color: #0056b3;
}
.compatibility-note {
font-size: 0.85em;
color: #666;
margin-top: 40px;
}
// Get references to DOM elements
const pickColorBtn = document.querySelector('#pickColorBtn');
const colorSwatch = document.querySelector('#colorSwatch');
const hexValueSpan = document.querySelector('#hexValue');
// Add an event listener to the button
pickColorBtn.addEventListener('click', async () => {
// 1. Feature Detection: Check if the EyeDropper API is supported by the browser
if (!window.EyeDropper) {
alert(
'Your browser does not support the EyeDropper API. Try Chrome, Edge, or Opera over HTTPS.'
);
return; // Exit if not supported
}
// 2. Instantiate EyeDropper: Create a new instance of the EyeDropper object
const eyeDropper = new EyeDropper();
try {
// 3. Open the EyeDropper: Call the open() method to activate the eyedropper tool.
// This method returns a Promise that resolves with the selected color's sRGBHex value.
const { sRGBHex } = await eyeDropper.open();
// 4. Update UI: If a color is successfully picked, update the color swatch and display its hex value.
colorSwatch.style.backgroundColor = sRGBHex;
hexValueSpan.textContent = sRGBHex;
console.log(`Color picked: ${sRGBHex}`); // Log the selected color to the console
} catch (error) {
// 5. Error Handling: If the user cancels the eyedropper (e.g., by pressing Escape),
// or if there's any other error, the Promise will reject.
console.error('EyeDropper operation cancelled or failed:', error);
hexValueSpan.textContent = 'N/A'; // Reset display
colorSwatch.style.backgroundColor = 'transparent'; // Reset swatch
alert('Color picking cancelled or an error occurred.');
}
});
// Initial state for the color swatch (transparent)
colorSwatch.style.backgroundColor = 'transparent';
The key interface
The main interface is EyeDropper, which represents an eyedropper tool instance that you can open for the user to select a color from the screen.
If you’re building a creative or customization-focused web app, the EyeDropper API can make color picking feel native and effortless—just be sure to account for browser support and the secure-context requirement.
