EyeDropper Color Picker

What this tool does

This tool lets you pick any color visible on your screen and instantly read it in the three formats developers use most. It is built on the browser’s native EyeDropper API: when you start the picker, a magnifier follows your cursor and a single click samples the exact pixel under it. The chosen color is shown as a large swatch alongside its HEX, RGB and HSL values, each with its own copy button. Every color you pick is added to a recent-picks strip so you can return to an earlier one without sampling it again.

Why you might need it

Color values are everywhere in front-end work, and they rarely arrive in a convenient form. A client sends a screenshot instead of a style guide. A logo in an image uses a shade you need to match in CSS. A competitor’s site has exactly the accent you want to reference. Opening a heavyweight design application just to read one hex code is overkill. Because the EyeDropper API samples the whole screen — not just the web page — you can lift a color from a PDF, a photo, a native app, or the desktop itself, and have it converted to copy-ready CSS in a second. It turns “what color is that?” from a chore into a single click.

How to use it

1. Open this page in Chrome or Edge (the API is Chromium-only for now).
2. Click Pick a color. Your cursor becomes a magnifier.
3. Move it anywhere on screen and click the pixel whose color you want.
4. Read the swatch and the HEX, RGB and HSL values that appear.
5. Click the copy button next to any format to put it on your clipboard.
6. Pick more colors as needed — each is saved to Recent picks. Click a swatch there to reload its values, or use Clear history to empty the strip.

If you change your mind mid-pick, press Esc to cancel; the tool keeps whatever color you had before.

Common pitfalls

The most common surprise is the tool reporting that your browser is unsupported. This is not a bug — the EyeDropper API simply has not shipped in Firefox or Safari, so the tool feature-detects it and tells you plainly rather than appearing broken. Another point of confusion is precision: the API returns the color of a single screen pixel, so sampling near the edge of an anti-aliased shape or over a gradient can give a blended value that differs slightly from the “intended” color. Zoom in on the target before picking if you need an exact match. Finally, the picker must be started by a real click — it cannot be triggered automatically — which is a deliberate browser safeguard against pages reading your screen without consent.

Tips and advanced use

When you are matching a brand color from an image, sample two or three nearby pixels and compare; compression artifacts mean a single sample is not always representative. Use the HSL value when you need to build a palette: keeping the hue fixed while changing lightness gives you consistent tints and shades far more predictably than nudging hex digits. The recent-picks strip is handy for collecting a small palette in one session — pick every color you need, then copy them one by one. And because the entire conversion runs locally in your browser, this is a safe way to inspect colors in confidential mockups or internal tools: the pixels you sample are never transmitted, logged, or stored anywhere off your device.