Screen Color Picker

The screen color picker uses the browser's built-in EyeDropper interface so you can pick a color from your screen and copy the hex value straight away.

What is Screen Color Picker?

The screen color picker hands the job of sampling to the browser itself. Press the open button and the cursor becomes a magnified loupe that travels over everything currently on screen — this page, other tabs, other applications, the desktop underneath. Click, and the color under the loupe arrives back in the page as a standard sRGB hex value, ready to copy. Nothing is uploaded, nothing is processed remotely: the sampling happens in the browser's own interface layer, and only the final value crosses back into the document.

This is the honest way to pick a color from screen content. Screenshot-and-inspect workflows lose a step to compression and scaling, and they pull you out of the page you were working in. Here the loop is press, point, click, copy. The hex that comes back is the color as the browser composites it — after your operating system's color profile and the page's own rendering have had their say — which is exactly the color your eye was looking at when you decided you wanted it.

As a browser eyedropper it is deliberately thin:

• One native sampling call, returning an sRGB hex value that drops straight into CSS, a design file or a ticket.
• No palette management, no history and no format switching — a single colour shown back at full size so you can confirm the sample landed where you meant it to.
• The capability check runs on load, so a browser without the EyeDropper interface gets a plain statement rather than a button that does nothing.

A few constraints are worth knowing before you reach for it:

• The EyeDropper interface is a Chromium-family feature — Chrome, Edge, Opera — and does not exist in Firefox or Safari.
• The picker only sees what the screen shows, so a colour behind another window has to be brought forward first.
• Whatever sits under the loupe at the moment of clicking is what you get: animating backgrounds, video playback and hover transitions change value from frame to frame, and a pinch taken mid-transition records a colour nobody intended to ship.

A screen picker is only as good as the frame it samples, so the workflow matters as much as the arithmetic. Bring the source window forward, hold still, and let the loupe settle before clicking: animating backgrounds, video playback and hover transitions all change value from frame to frame, and a pinch taken mid-transition records a colour nobody intended to ship. Where the target is small, a magnified preview beats a hopeful click, and where it is text on a coloured panel, sampling the glyph edge rather than its centre is the difference between the palette colour and an anti-aliased blend of it.

None of that is the tool's job, but all of it is why this beats a screenshot. The pick color from screen step is a single gesture, the capture on screen color result that comes back is the real value rather than something reconstructed by eye afterwards, and the sample can be repeated as often as the layout changes without another round trip through the image editor. Work that needs a dozen picks in one sitting — auditing a theme, matching a competitor's accent palette, rebuilding a reference layout — therefore turns into a few minutes of clicking rather than an afternoon of annotated screenshots.

Because the value returns as sRGB hex, it drops straight into CSS, design files and ticket descriptions without a conversion step. That is the whole point of a screen color picker: remove every step between I want that color and that color is in my stylesheet, and do it with the capture precision of the platform rather than the guesswork of a screenshot.

How to use Screen Color Picker

1. Press the open eyedropper button — the cursor becomes a magnified loupe.
2. Move the loupe over any pixel on screen, in any window, and click to capture it.
3. Confirm the swatch, then copy the hex value into your CSS or design tool.

When to use Screen Color Picker vs related tools

Use this when the color you want is somewhere on screen — another app, a photo viewer, a brand site in the next tab. Use the image color picker when the source is a file, and the pixel color picker when you need to sample inside an uploaded image rather than the live screen. Where the source is a file, the image color picker samples inside an uploaded image, and the pixel color picker reads exact pixel values when bit-level accuracy matters rather than the live screen.

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 Screen Color Picker