EyeDropper API in JavaScript
How to use the native EyeDropper API in the browser with JavaScript — with fallback strategies.
Published:
Tags: EyeDropper API JavaScript, browser color picker JS, EyeDropper JavaScript
EyeDropper API in JavaScript The EyeDropper API lets your web app sample any color from the screen using native browser capabilities. No canvas tricks, no screenshot analysis — one method call triggers the OS-level color picking mode. The EyeDropper API was standardized in 2023 and is now supported in 95%+ of modern browsers. For a user-facing guide to the eyedropper tool, see Browser Eyedropper Tool: Pick Any Color. For the full color tools overview, see the Color Tools for Designers and Developers guide. --- What is basic usage? The method is async and requires a user gesture (button click, keyboard shortcut, etc.) to activate. It cannot be called programmatically without user interaction. --- What is Abort Controller Support? You can programmatically cancel an in-progress eyedropper…
Frequently Asked Questions
How do I use EyeDropper API in JavaScript?
Create a new EyeDropper instance and call the async `open()` method. The method returns a promise that resolves with `{ sRGBHex: '#rrggbb' }` when the user clicks a pixel. Wrap it in a try/catch because the user can cancel (Escape key), which causes the promise to reject with an AbortError.
What browsers support EyeDropper?
EyeDropper API is supported in Chrome 95+, Edge 95+, and Opera 81+. It is not supported in Firefox or Safari (as of early 2026). Both browser teams have indicated interest in implementing it, but no firm timeline exists. Always check for support before using it.
How do I detect if EyeDropper is supported?
Check for the `EyeDropper` constructor on `window`: `if ('EyeDropper' in window)`. This is the standard feature detection pattern. If unsupported, show a fallback: an `<input type='color'>` element, a manual hex entry field, or a pre-built color picker library.
How do I get a hex color from EyeDropper?
The `result.sRGBHex` property returned by `eyeDropper.open()` is already a hex string in the format `#rrggbb` (lowercase, 6 digits). No further parsing is needed. You can pass it directly to any CSS property or color converter function.
What is an alternative to EyeDropper in unsupported browsers?
The most accessible fallback is `<input type='color'>` which opens the OS native color picker. For a richer fallback, use a JavaScript color picker library like `@simonwep/pickr` or `iro.js`. If you only need hex input (not screen sampling), a text field with hex validation is the simplest option.
All articles · theproductguy.in