How does the EyeDropper API work?

new EyeDropper().open() returns a promise that resolves with { sRGBHex } after the user clicks a pixel in the native magnifier loupe. This lab calls it directly.

Can I cancel a color pick?

Yes: press Esc, or abort the AbortSignal passed to open(). The lab wires both and shows the cancel in a toast.

Can it pick colors outside the browser?

Yes, that is the point: the loupe works over any window on screen, not just the page, which is why it needs a user gesture to activate.

What color format does it return?

An sRGB hex string like #0F766E. The lab also converts it to rgb() for each swatch.

What is in the downloaded palette?

A JSON file with the palette name, export time, and every color as both hex and rgb values.

EyeDropper - Interactive Lab | IconVault

Q: Which browsers support EyeDropper?

Chrome and Edge 95 and later on desktop. Firefox and Safari do not implement it.

Pick colors from anywhere on screen with the real EyeDropper API and build a palette. Free, runs fully in your browser.

All tools

EyeDropper

Pick colors from anywhere on screen

5 of 5 free uses left

EyeDropper is not supported in this browser.

It needs Chrome or Edge 95 and later on desktop. Firefox and Safari do not implement it yet.

Color picker

The browser opens its native magnifier loupe. Click any pixel on any window: the exact sRGB hex lands in your palette. Press Esc to cancel.

5 of 5 free picks left.

Palette (0)

Your picked colors appear here

Each pick adds a swatch. Click a swatch to copy its hex value.

About this tool

IconVault's EyeDropper playground uses the real `EyeDropper` API: one click opens the browser's native magnifier loupe, and the exact sRGB hex of any pixel on any window lands in your palette. Build the palette up, click a swatch to copy its hex, and download the whole set as JSON. It is free and runs fully in your browser.

You will learn the one-method API (`new EyeDropper().open()`), how to cancel a pick with an AbortSignal or the Esc key, and why the API only exists on desktop Chromium. Picks are per-pixel exact, which makes this the fastest way to steal a color from a screenshot, a video frame or another app.

Frequently asked questions

Popular searches

eyedropper apieyedropper javascriptcolor picker from screenpick color from screenscreen color pickereyedropper web apinew eyedropper().open()srgbhexcolor picker api browsersample pixel color webdesktop color picker webeyedropper exampleeyedropper tutorialeyedropper browser supportcaniuse eyedroppereyedropper firefoxeyedropper safariabort eyedroppereyedropper abortsignalpalette builder onlinecolor palette from screenextract colors from image webcopy hex colorhex to rgbonline color picker toolscreen sampler tooldesign color pickerui color pickerweb design eyedropperchrome eyedropperedge eyedroppermagnifier loupe webpixel color pickerpick color from videopick color from screenshotcolor palette json exportswatch buildercolor palette generatormdn eyedroppertest eyedropper onlineeyedropper demoeyedropper reacteyedropper typescriptcolor thief alternativebrowser color toolsdesigner tools onlinehex color copierrgb valuescolor contrast checkscreen color samplerpick any pixel color

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →

EyeDropper - Interactive Lab | IconVault

EyeDropper

Color picker

Palette (0)

About this tool

Frequently asked questions

Popular searches

More tools

Algorithm Visualizer

Alt Text Helper

ARIA Reference

Array Visualizer

Coming soon