ZeroTool Workbench

Eyedropper Color Picker

Pick colors from anywhere on your screen using the browser's native EyeDropper API. Output sRGB HEX, RGB, HSL and save a recent palette — no upload, no extension.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
#1a73e8
Recent

No colors picked yet.

Related Tools

Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. Color Shades Generator Generate 10 Tailwind-style color shades (50–900) from any base color. Shows HEX, HSL, and RGB values. Click to copy individual shades or copy all as CSS variables. Color Palette Generator Generate complementary, analogous, triadic, and tetradic color palettes from any base color. Enter HEX or pick a color to instantly see 4 harmonious palettes. Click to copy individual colors or copy all HEX values per palette. 100% browser-based. Color Contrast Checker Check WCAG color contrast ratio for any foreground and background. Get AA/AAA pass-fail for body text, large text, and UI components, plus a one-click "keep hue, fix lightness" suggestion when contrast is too low. Color Blindness Simulator Simulate 8 types of color vision deficiency on any color or image. See protanopia, deuteranopia, tritanopia, and more side by side. 100% client-side, no upload. JSON Formatter Prettify, minify, and validate JSON instantly in your browser.

How to Use

  1. Click Pick from screen. Your cursor turns into a magnifier — click any pixel to sample.
  2. Or use the Native picker button for a built-in color dialog (works in every browser).
  3. The HEX, RGB, and HSL fields update in sync. Edit any field to recompute the other two.
  4. Click Copy next to any format to send it to your clipboard.
  5. Your last 8 sampled colors stay in the Recent colors strip — click a swatch to reload it.

EyeDropper API in 60 seconds

EyeDropper is a browser-native Web API that lets a page sample pixels from anywhere on the user’s screen. The page calls new EyeDropper().open(); the browser opens a system-level magnifier; on click, the promise resolves to an object whose sRGBHex property holds the picked color.

The API is privacy-safe: the page never gets pixel data, only the single selected color. The user must initiate every pick with a click — there is no headless or scripted sampling.

When to use which mode

  • Pick from screen — when the color lives in another app, a screenshot, or a video frame.
  • Native picker — when you want to author a fresh color or use a familiar HSV wheel.
  • Type into a field — when you have an exact value (e.g. from a design spec) and need its sibling formats.

FAQ

Which browsers support the EyeDropper API?

Chrome, Edge, and Opera (Chromium 95+) ship the EyeDropper API. Safari and Firefox do not yet support it — this tool automatically falls back to the native color input on those browsers.

Why does the picker need a button click?

The browser requires a user gesture (a click) to open the eyedropper. You cannot trigger it from setTimeout or auto-open on page load. Click 'Pick from screen' every time you sample.

Can it pick colors outside the browser window?

Yes. The EyeDropper API can sample any pixel on your physical screen, including other applications, as long as the picker is open.

Is the picked color sRGB-accurate?

The API returns sRGB hex strings. Wide-gamut (P3) values from HDR screens are mapped down to sRGB. For exact color management workflows, verify with a color-managed tool.

Where are recent colors stored?

The last 8 picks live in your browser's localStorage only. Nothing is uploaded. Clear them with 'Clear recent'.