Screen Color Picker

How to Pick a Colour from Your Screen

Features

How This Actually Reaches Beyond the Page

A normal web page can only ever see its own pixels — there's no way for JavaScript to read a colour from another window or app. This tool works because it hands the job to the browser itself: clicking Pick Color calls the browser's native EyeDropper API, which takes over your cursor at the operating-system level. While that crosshair is active, you can click on literally anything visible on your screen — a Figma comp in another window, a video paused mid-frame, your desktop wallpaper — and the browser reads that one pixel and hands the colour back. Nothing is recorded or screenshotted; it's a single, explicit sample triggered by your own click, which is exactly why browsers are comfortable exposing it without a scarier permission prompt.

Built-In Fallback for Firefox and Safari

The EyeDropper API is Chromium-only for now, so Firefox and Safari don't get the live screen-grab button at all. Rather than a dead end, this tool detects that automatically and swaps in a second path: take a normal OS screenshot (Win + Shift + S on Windows, Cmd + Shift + 4 on Mac), upload it here, and click any pixel with the same zoom-loupe precision our Color Picker tool uses for images. One extra manual step, but the same HEX, RGB, HSL, HSB and CMYK output either way.

How This Differs from Our Other Colour Tools

Color Picker samples a pixel from an image you've already uploaded into that tool — precise, but scoped to that one file. Color Palette Extractor goes further and scans an uploaded image automatically, returning its several most dominant colours without you clicking anything. This tool skips the upload step entirely — it grabs one exact colour from anything currently rendered on your actual screen, which matters the moment the colour you want isn't already saved as an image file: a colour inside a running app, a live webpage, a video call, or a design tool open in another window.

What "Nearest Named Colour" Is Actually Measuring

The named-colour match under a picked swatch isn't a lookup table of rounded values — it's a real distance calculation against the full CSS3/CSS4 named-colour list, over a hundred standard names from aliceblue through yellowgreen. Each candidate's RGB values get compared against the picked colour using squared differences across red, green and blue, and whichever name comes out with the smallest total distance wins. A distance of exactly zero means an exact match; anything else is genuinely the closest available name, not a guess.

Contrast Check works from an equally real formula rather than an approximation — the actual WCAG relative-luminance calculation, weighting red, green and blue by how the human eye perceives their brightness, then comparing the lighter and darker of the two colours to produce the ratio itself. That's the same arithmetic a real accessibility audit tool uses, which is why the AA and AAA pass/fail badges here can be trusted rather than treated as a rough approximation.

Who Actually Reaches for This

• Designers and developers — matching a colour used somewhere in a live app, a competitor's site, or a running design tool, without exporting a screenshot first.
• Anyone rebuilding a brand's look — sampling a logo or a photo directly off a website as it's actually rendered on screen.
• Front-end developers debugging a live page — grabbing the exact rendered colour of an element, including effects like opacity or filters that a static asset wouldn't show.
• Anyone who just needs one colour fast — no file to find, no upload dialog, just click and copy.

Real Ways This Gets Used

A developer matching a button colour from a competitor's live site samples it directly off the rendered page, gets the exact HEX instantly, and moves on — far faster than a screenshot, a crop, and an upload into a separate tool.

A designer picks a colour from a photo already open in another app, then builds a full scheme around it with the Color Palette Generator instead of eyeballing complementary tones by hand.

Someone rebuilding a slide deck samples a brand colour straight from a PDF open in another window, checks it against white and black with the contrast tool built in here, and confirms it's actually legible as text before using it.

Getting a Cleaner Sample

• Zoom in first if the source is small or detailed — the EyeDropper samples exactly where you click, so a larger on-screen target is easier to hit precisely.
• Watch for anti-aliased edges, a click right on a boundary between two colours can sample a blended pixel rather than either intended colour.
• Use the screenshot fallback for anything that keeps moving, like a video — pause it first, or capture a still frame, since the EyeDropper needs a stable moment to click.
• Check contrast before committing a picked colour to text — a colour that looks fine on screen isn't always readable once it's the actual foreground or background.

If Something Doesn't Work as Expected

Clicking Pick Color does nothing? Your browser likely doesn't support the EyeDropper API — the tool should already have swapped to the screenshot-upload fallback in that case. If it hasn't, refresh the page.

The pick got cancelled with no colour shown? Pressing Escape while the crosshair is active cancels intentionally, with no error — just click Pick Color again.

The sampled colour doesn't match what you expected? A slightly different shade than eyeballed usually means the click landed on an anti-aliased edge or a semi-transparent overlay — try again a pixel or two into the solid part of the colour.

Where This Falls Short

This samples exactly what's rendered on your screen at one moment, which means display calibration, brightness and colour profile all affect the result slightly — the same colour can read a touch differently on two different monitors, even though the sampled RGB value is identical. It's also a single-pixel tool by design; if what you actually need is every dominant colour in an image automatically, the Color Palette Extractor is built for that instead of clicking around manually.