Pull exact colors out of any screenshot
Design files are where colors start; screenshots are where they end up — and the two don’t always agree. This tool reads the actual pixels of any image you drop in, so you can get the hex color from an image instead of guessing. Everything runs on canvas APIs inside your browser, reading colors straight from the decoded pixels.
How to use the color picker
- Add an image. Drop a file, click to browse, or paste a screenshot straight from the clipboard with ⌘V.
- Hover to aim. The loupe magnifies an 11×11 pixel grid around your cursor with a live hex readout, so you land on exactly the pixel you mean.
- Click to pick. Each pick joins a history strip and shows HEX, RGB and HSL values with one-click copy buttons.
- Grab the palette. Six dominant colors are extracted on load — an image color palette generator built in. Click any swatch to copy its hex.
On Chromium browsers a pick-from-screen button appears too: an online eyedropper that samples any pixel visible on your display, even outside the image.
When picking from an image beats opening the design file
The most common case is verifying rendered output against a spec. The design says the button
is #2F6BFF; the screenshot from QA shows what actually shipped after themes,
opacity and layer blending had their say. Picking from the screenshot settles it in seconds.
The other big one is recovering a palette when there is no source file at all — an old design
whose Figma is long gone, a competitor’s landing page, a poster you photographed. The
automatic palette gives you honest starting swatches, and the loupe gets you exact values
from the flat areas.
Color checks rarely travel alone. If the same screenshot is headed for a bug report, mark the mismatch with our screenshot annotator; if it’s going in a deck, dress it up with the screenshot mockup.
HEX, RGB and HSL at a glance
HEX
A hex code is the six-digit hexadecimal form of a color — two digits each for red, green and
blue, so #2F6BFF means 47 red, 107 green, 255 blue. It’s the default currency of
CSS, design tools and brand guidelines — copy it to move a color between tools unchanged.
RGB
rgb(47, 107, 255) spells out the same three channels in decimal, 0–255 each.
It’s exactly as precise as hex, just easier to read and adjust channel by channel — and it
extends naturally to rgba() when transparency is coming.
HSL
HSL describes color the way people think about it: hue as an angle on the color wheel, then
saturation and lightness as percentages — hsl(223, 100%, 59%) is that same blue.
Copy it when you want to derive hover states or tints — nudge the lightness, keep the hue.
Why a picked pixel can differ from the CSS value
Two effects cause most surprises. The first is antialiasing: at the edge of text or a rounded corner, the renderer blends foreground into background, so edge pixels belong to neither color — the loupe exists precisely so you can step off the edge and pick from a flat fill. The second is color management: a screenshot taken on a wide-gamut display (recent Macs tag captures as Display P3) passes through a profile conversion before its pixels reach this page, which can shift a channel by a point or two. Neither is a bug — both are honest records of what the screen showed. When exactness matters, pick from the middle of solid areas, on screenshots from the same machine.
Clean inputs help most of all. On a Mac, Snapix’s area capture (⌘⇧4) draws pixel-precise crosshairs with live dimensions, so the region you grab is exactly the region you meant — and every capture stays right on your machine.
