Eyedropper Tool

The eyedropper tool samples any pixel on your screen using the browser's native EyeDropper API, returning the color as a hex value you can copy.

What is Eyedropper Tool?

The eyedropper tool is a single button and a result. Press Open eyedropper and the browser takes over: the cursor becomes a sampling target that you can move anywhere, over any application or window, not just this page. Click on a pixel and the tool fills a large swatch with the colour it found, along with the hex value and a copy button. Press Escape instead and nothing is picked, with a short cancelled message shown in place of a result.

What the tool hands back is deliberately minimal:

• One native EyeDropper call, where the browser takes over the cursor and can sample any window rather than only this page.
• The result arrives as an sRGB hex value on a large swatch with a copy button.
• Escape cancels instead of picking, leaving a short cancelled message in place of a result.

The mechanism behind it is the EyeDropper API, a browser-level sampling interface rather than a canvas trick. That distinction is the whole reason the tool is useful: because the browser is doing the sampling, it can read pixels outside the page — a desktop application, a video frame, a PDF, another browser tab — which no page-based colour picker can do. It also means the colour that comes back is the colour as rendered, after any display scaling and colour management the system has applied, which is usually what you want when matching something on screen.

The honest caveat is support. The API is implemented in the Chromium family — Chrome, Edge and Opera — and not in Firefox or Safari. The page detects this after loading and, where the API is missing, replaces the button with a plain statement of what to use instead. That detection is deliberately done on the client rather than during the render, so the page does not disagree with itself between the server and the browser.

The workflow is as direct as the tool. Open the dropper, move to whatever you are matching, click, and copy the value from the swatch. Because there is no intermediate state — no image upload, no zoom-and-click on a canvas — it is the right choice when the thing you are sampling is already on screen and you simply need its value. It is a poor choice when the source is a file on disk or a design asset, since there is nothing to sample until it is displayed.

A couple of practical points:

• The result arrives as a hex code and nothing else, so for rgb() or hsl() form the value goes through a converter.
• Sampling a very small feature can be awkward at high display scaling, in which case zooming the source first helps.
• Nothing can be sampled until it is displayed: a file on disk or a design asset has to be opened on screen first.

As a screen color picker tool it covers the case that image-based samplers cannot, and as a hex color picker tool it returns a value ready to paste. When you need to pick color from screen — matching an existing brand asset in another window, or grabbing a colour from a video — this is the shortest path available in a browser, and when you need to sample color from anywhere inside an uploaded image instead, the image colour picker is the tool to use.

How to use Eyedropper Tool

1. Press Open eyedropper; the cursor turns into a sampling target.
2. Move over whatever you are matching — any window, not just this page — and click the pixel.
3. Read the hex value from the large swatch and copy it.
4. Press Escape instead to cancel, which leaves nothing picked.

When to use Eyedropper Tool vs related tools

Use this when the colour you need is already visible somewhere on screen and you want it as a value in one click. Use the image colour picker when you need to sample from an uploaded file, or the palette extractor when you want an image's several main colours rather than one pixel. For a file on disk the image color picker samples an uploaded image, and the palette extractor returns an image's main colors instead of one pixel.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Eyedropper Tool