The EyeDropper API is one of the most user-friendly and visually engaging new Web APIs available today. It allows web applications to open a native color picker that lets users select any pixel color from their screen, just like the eyedropper tool in Photoshop.

This feature is incredibly useful for apps involving design, customization, or accessibility. In this article, we’ll walk through what the EyeDropper API is, how it works, and how to implement it in a clean, practical color picker web tool.

Demo

Here's a small demo of the native browser functionality:

🎯 What is the EyeDropper API?

The EyeDropper API is a browser-native interface that opens a color selection mode, allowing users to click anywhere on their screen to pick a color. Once selected, the API returns the color as a string in sRGB hexadecimal format (#rrggbb).

✅ Current Browser Support

As of 2025, it's supported in:

• Chrome (desktop & Android)
• Edge
• Opera

It is not yet supported in Firefox or Safari unfortunately.

Setting Up a Basic Color Picker Tool

Let’s create a small but fully functional tool with a button that triggers the EyeDropper and displays the chosen color.

📄 HTML Structure

<div class="picker-container">
  <button id="pick-color">Pick a color</button>
  <div id="color-display" style="margin-top: 10px; width: 100px; height: 100px; border: 1px solid #ccc;"></div>
  <p id="hex-output"></p>
</div>

Styling (Optional)

.picker-container {
  font-family: sans-serif;
  padding: 20px;
}
button {
  padding: 10px 20px;
  cursor: pointer;
}

JavaScript Implementation

const button = document.getElementById('pick-color');
const colorDisplay = document.getElementById('color-display');
const hexOutput = document.getElementById('hex-output');

button.addEventListener('click', async () => {
  if (!window.EyeDropper) {
    alert('EyeDropper API not supported in this browser.');
    return;
  }

  const eyeDropper = new EyeDropper();

  try {
    const result = await eyeDropper.open();
    const pickedColor = result.sRGBHex;
    colorDisplay.style.backgroundColor = pickedColor;
    hexOutput.textContent = `Selected Color: ${pickedColor}`;
  } catch (err) {
    console.error('EyeDropper canceled or failed:', err);
  }
});

🔍 Code Breakdown

• window.EyeDropper: We check if the API is available.
• new EyeDropper(): If it's available, we instantiates a new eyedropper session.
• .open(): Opens the eyedropper mode, returning a promise with the color the user clicks.
• result.sRGBHex: The returned color as a string like #3a3a3a.
• The selected color is applied as a background and displayed as text.

Handling Unsupported Browsers

Because this API is relatively new, not all users will have support. Always include fallback messaging:

if (!window.EyeDropper) {
  alert('This browser does not support the EyeDropper API. Please try in Chrome or Edge.');
}

You could also offer a basic HTML <input type="color"> element as a fallback.

Real-World Use Cases

• Design Tools: Grab colors directly from user screens.
• Accessibility Auditing: Pick on-screen colors to check contrast.
• Customization Widgets: Let users select colors from anywhere to theme their UI.
• Photo Editors: Pull pixel colors from an uploaded image or from anywhere else on-screen.

Tips and Notes

• The API will not work if the page is not served over HTTPS.
• The call to eyeDropper.open() must come from a user interaction (like a button click) or it will be blocked.
• You cannot capture the pixel color of the browser UI, extensions, or OS-level windows.

Resources

• MDN EyeDropper API Docs
• Chromium EyeDropper Spec

Final Thoughts

The EyeDropper API brings a highly interactive experience to the web with just a few lines of JavaScript. Whether you’re building a creative tool or just want to offer a unique UX feature, this API is an easy win.

As browser support grows, expect to see this used in more creative and productivity web apps. Until then, build with graceful fallbacks and you’ll be ahead of the curve.