A common case: you have to match a palette from reference material that has no source files, such as a screenshot from a launch video, an exported mockup, or an old PDF. The old workflow is to crop a slice, paste it into an image editor, use its eyedropper, copy the hex and repeat for every color.

Screen-level color picking used to need a separate app or a browser extension with its own permissions. Since Chrome 95, Chromium browsers ship an EyeDropper API that does the common case: the browser shows its own picker, the user selects one pixel, and the page gets an sRGB hex string. ZeroTool’s Color Picker from Image & Screen uses that API, and it also reads pixels from images and pasted screenshots in browsers that do not have it.

The EyeDropper API in 60 Seconds

EyeDropper is specified in a W3C Community Group draft of the WICG (EyeDropper API). The surface is tiny:

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // "#3a7bd5"

open() returns a Promise. The browser shows its picker, the user clicks one pixel anywhere on the screen, including outside the browser window, and the promise resolves with an object whose sRGBHex property holds the color in the #aabbcc form (MDN). If the user presses Escape, the promise rejects with an AbortError.

Three constraints worth internalizing before you build on top of it:

  • User activation required. open() without transient user activation rejects with NotAllowedError, so call it from a click or key handler. There is no auto-open on page load and no headless sampling. The spec’s security section explains why: a page must not be able to “screen scrape” what the user did not intend to share, so pixel data is released only after an explicit action such as a mouse press.
  • One pick per call. Each call returns one color and closes the picker. To get a second color, the user has to click your button again. A second open() while one is open rejects with InvalidStateError.
  • sRGB output only. The result is always an sRGB hex string. On macOS, Chromium converts the sampled display color to sRGB and then to 8 bits per channel (skia_utils_mac.mm, CGColorRefToSkColor), so a wide-gamut color comes back clipped. The API has no way to return the Display P3 value.

Browser support, from MDN browser-compat-data 8.1.3 (2026-09-24): Chrome and Edge 95+ and Opera 81+ on desktop. It is not available on Linux Wayland. Firefox, Safari, Chrome on Android and iOS browsers do not support it. Capability detection is a one-liner:

if ('EyeDropper' in window) {
  // EyeDropper available — wire up the screen-pick button
} else {
  // Offer another path: an image or screenshot to pick from
}

Using the Tool

Open Color Picker from Image & Screen. It has four ways in:

  1. Pick from screen. Click the button, then click any pixel on your screen. This is the EyeDropper path, so it appears only where the API exists.
  2. Open image. Open a file, drop it on the tool, or paste a screenshot with Ctrl+V / ⌘V. A loupe shows the 11 × 11 pixels around the pointer. A click, or Enter after moving with the arrow keys, picks one pixel or the 3 × 3 / 5 × 5 average. This works in every browser.
  3. Color dialog. Opens the system color picker through <input type="color">.
  4. Type a value. Paste any CSS color into any field (HEX, rgb(), hsl(), oklch(), color(display-p3 …) or a name). The other fields recompute.

Output is HEX, RGB, HSL, OKLCH and Display P3, each written so that it converts back to the same 8-bit color. The last 16 picks are kept in a Recent colors strip backed by localStorage. Images are not stored, and no picker path makes a network request.

Four Concrete Use Cases

Reverse-Engineering a Design

You have a screenshot or a mockup export and you need its palette as CSS variables or Tailwind tokens. Open the reference in any window, click “Pick from screen”, and click the color. In Firefox or Safari, paste a screenshot of the reference into the tool instead and click the color in the loupe.

Dedicated apps still do more: floating palettes, hotkeys, named libraries. For a handful of colors on one project, the browser is enough.

Brand-Guide Forensics

A common request: “the website used to be this exact blue, we lost the source files, can you match it from this old PDF or screenshot?” Without the original tokens, you read colors off rendered images. Open the image in the tool and pick at full resolution. Use the 3 × 3 or 5 × 5 average on JPEG screenshots, where compression makes neighboring pixels differ.

Video and Stream UI Inspection

Video overlays, thumbnails, screen recordings and slides are all fair game. Pause the frame, click “Pick from screen”, click the pixel.

The value is the pixel as it is displayed, after video decoding, scaling and compositing, and then converted to sRGB as above. It is “what the user sees”, not “what the source asset specified”.

Accessibility Audits

Once you have a color, you usually want to check contrast against another. Pick the foreground, pick the background, then paste both into Color Contrast Checker for the WCAG AA/AAA verdict. For color-vision-deficiency audits, run the picked color through Color Blindness Simulator to see how a deuteranopic or protanopic viewer perceives your palette.

Limits and Workarounds

Safari and Firefox users. The EyeDropper capability check returns false. The tool hides “Pick from screen” and makes “Open image” the main action. Take a screenshot to the clipboard and paste it: on a Mac, add Control to the screenshot shortcut, for example Control-Shift-Command-4 (Apple); on Windows, PrtSc copies the whole screen (Microsoft). The operating systems also ship screen pickers: Digital Color Meter on macOS and PowerToys Color Picker (Win + Shift + C) on Windows.

No continuous sampling. Every pick requires a fresh click on your button. Fifty colors means fifty button clicks and fifty pixel clicks. This is the user-activation rule, not a tool limitation.

P3 and HDR clipping. On a wide-gamut display, a color outside sRGB is converted to sRGB and clipped before it reaches your code. If you need the wide-gamut value, pick from the image file instead: browsers that can create a Display P3 canvas (Chrome and Edge 92+, Safari 15.2+) let the tool read the P3 value and flag the clipping.

Recent colors live in localStorage. Clearing site data wipes the strip. It stays on your machine and is never synced.

FAQ

Why can’t it sample multiple pixels at once or read a region?

The API returns one color per user action by design. The spec’s security section says an eyedropper must not let a page “screen scrape” information, and it suggests releasing pixel data only after an explicit action, showing a clear indication of eyedropper mode and letting the user exit with Esc (EyeDropper API, Security and Privacy Considerations).

What should Safari and Firefox users do?

Use a screenshot. Copy it to the clipboard, paste it into the tool with ⌘V or Ctrl+V and click the pixel. The tool reads it at full resolution. For live screen sampling without a browser, use Digital Color Meter on macOS or PowerToys Color Picker on Windows.

Why does my P3 display give different values than Photoshop?

Photoshop reads the document’s values in the document’s color space. The EyeDropper API returns the displayed color converted to sRGB, clipped to 0–255 per channel. For a color outside sRGB, the two numbers cannot match. Pick from the exported file in a browser with Display P3 canvas support to see the P3 value.

Can a page open the eyedropper without a click?

No. Without transient user activation, open() rejects with NotAllowedError (MDN). Call it from the click or key handler that the user triggered.

Will Recent Colors sync across browsers or devices?

No. The strip is stored in localStorage for the current origin — per-browser, per-profile, per-device. Clearing site data deletes it. No account, no upload, no cross-device sync.

Once you have a hex, the next steps usually live in one of these:

  • Color Converter — convert the color between formats with a live preview.
  • Color Shades Generator — turn one color into a Tailwind-style ramp from light to dark.
  • Color Palette Generator — build harmony palettes such as complementary, analogous and triadic around a base color.
  • Color Contrast Checker — verify a foreground/background pair passes WCAG AA or AAA, with large-text and UI-component thresholds.

Open Color Picker from Image & Screen next time you need a hex out of a screenshot. It is free, runs in the browser, and keeps no image after you close the tab.