Eyedropper Tool Chrome Extension Guide (2026)

Last updated: April 17, 2026

The Chrome Eyedropper API provides a powerful way to capture colors directly from web pages. This tool enables users to sample any pixel color on their screen and get its hex, RGB, or HSL values. For developers building design tools, color pickers, or accessibility utilities, understanding this API opens up practical possibilities.

What Is the Chrome Eyedropper API?

The EyeDropper API is a web standard that allows websites and extensions to access a system-provided color picker. Chrome added support in version 95, making it available to both regular web pages and browser extensions.

This API solves a common problem: getting exact color values from designs, screenshots, or any content visible on screen. Rather than using external tools or taking screenshots, users can sample colors directly through your extension.

Checking Browser Support

Before implementing, verify that the EyeDropper API is available in the user’s browser:

function isEyeDropperSupported() {
 return 'EyeDropper' in window;
}
// Usage
if (isEyeDropperSupported()) {
 console.log('EyeDropper is available');
} else {
 console.log('EyeDropper not supported in this browser');
}

This check prevents errors on browsers that don’t support the API, particularly Safari and older browser versions.

Basic Implementation

The EyeDropper API follows a simple promise-based pattern. Here’s how to implement a basic color picker in your extension:

async function pickColor() {
 const eyeDropper = new EyeDropper();
 
 try {
 const result = await eyeDropper.open();
 const color = result.sRGBHex;
 console.log('Selected color:', color);
 return color;
 } catch (error) {
 console.log('User canceled color selection');
 return null;
 }
}

The open() method launches the system color picker. When the user selects a color, it returns an EyeDropperResult object containing the selected color in sRGB hex format. If the user cancels, the promise rejects with an AbortError.

Converting Color Formats

The API returns colors in hex format by default (#ff5733). For most use cases, you’ll want to convert this to other formats. Here’s a utility to convert hex to RGB:

function hexToRgb(hex) {
 const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 return result ? {
 r: parseInt(result[1], 16),
 g: parseInt(result[2], 16),
 b: parseInt(result[3], 16)
 } : null;
}
// Usage
const rgb = hexToRgb('#3498db');
console.log(`RGB(${rgb.r}, ${rgb.g}, ${rgb.b})`);
// Output: RGB(52, 152, 219)

For HSL conversion:

function hexToHsl(hex) {
 let { r, g, b } = hexToRgb(hex);
 r /= 255; g /= 255; b /= 255;
 
 const max = Math.max(r, g, b), min = Math.min(r, g, b);
 let h, s, l = (max + min) / 2;
 
 if (max === min) {
 h = s = 0;
 } else {
 const d = max - min;
 s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 switch (max) {
 case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
 case g: h = ((b - r) / d + 2) / 6; break;
 case b: h = ((r - g) / d + 4) / 6; break;
 }
 }
 
 return {
 h: Math.round(h * 360),
 s: Math.round(s * 100),
 l: Math.round(l * 100)
 };
}

Building a Complete Extension

Here’s a practical example of a Chrome extension popup that uses the Eyedropper API:

manifest.json:

{
 "manifest_version": 3,
 "name": "Color Picker",
 "version": "1.0",
 "description": "Pick colors from any webpage",
 "permissions": ["activeTab"],
 "action": {
 "default_popup": "popup.html"
 }
}

popup.html:

<!DOCTYPE html>
<html>
<head>
 <style>
 body { font-family: system-ui; padding: 16px; width: 200px; }
 #color-preview {
 width: 100%; height: 60px; border-radius: 8px;
 margin-bottom: 12px; border: 1px solid #ccc;
 }
 .color-value { 
 display: block; margin: 8px 0; 
 font-family: monospace; cursor: pointer;
 }
 </style>
</head>
<body>
 <div id="color-preview"></div>
 <span id="hex-value" class="color-value">Click to pick</span>
 <button id="pick-btn">Pick Color</button>
 
 <script src="popup.js"></script>
</body>
</html>

popup.js:

document.getElementById('pick-btn').addEventListener('click', async () => {
 if (!('EyeDropper' in window)) {
 alert('EyeDropper not supported');
 return;
 }
 
 const eyeDropper = new EyeDropper();
 
 try {
 const result = await eyeDropper.open();
 const color = result.sRGBHex;
 
 document.getElementById('color-preview').style.backgroundColor = color;
 document.getElementById('hex-value').textContent = color;
 
 // Copy to clipboard
 await navigator.clipboard.writeText(color);
 } catch (error) {
 console.log('Selection cancelled');
 }
});

This extension provides a functional color picker that displays the selected color, shows the hex value, and copies it to the clipboard automatically.

Use Cases for Developers

The Eyedropper API serves several practical purposes:

Design System Management: Extract colors from existing designs to build or update design systems. This helps maintain consistency across projects.

Accessibility Testing: Check color contrast ratios by sampling foreground and background colors. Combine with a contrast checker to verify WCAG compliance.

Debugging Styles: Quickly identify the exact colors used on a page without opening developer tools. Useful for CSS debugging and design verification.

Theme Development: Sample colors from reference designs when building dark mode or theme switchers.

Limitations and Considerations

The EyeDropper API has some constraints to keep in mind. It only works in secure contexts (HTTPS), which means it won’t function on HTTP pages except for localhost. The API captures colors from the entire screen, not just the browser window, giving users flexibility but raising privacy considerations.

Additionally, the user must explicitly initiate each color selection. There’s no programmatic way to silently sample colors, which prevents unauthorized color harvesting.

Browser Compatibility

As of 2024, the EyeDropper API is supported in Chrome 95+, Edge 95+, and Opera 81+. Firefox and Safari have not yet implemented this feature. Always include a fallback message or alternative color selection method for users on unsupported browsers.

Conclusion

The Chrome Eyedropper API provides a straightforward way to integrate color sampling into your extensions and web applications. With just a few lines of code, you can give users the ability to pick any color visible on their screen. The promise-based API is easy to work with, and the integration shown here can serve as a starting point for more sophisticated color management tools.

Try it: Paste your error into our Error Diagnostic for an instant fix.

I'm a solo developer in Vietnam. 50K Chrome extension users. $500K+ on Upwork. 5 Claude Max subscriptions running agent fleets in parallel. These are my actual CLAUDE.md templates, orchestration configs, and prompts. Not a course. Not theory. The files I copy into every project before I write a line of code. **[See what's inside →](https://zovo.one/lifetime?utm_source=ccg&utm_medium=cta-default&utm_campaign=chrome-extension-eyedropper-tool)** $99 once. Free forever. 47/500 founding spots left.