Color Picker From Image

Every image is a grid of stored colour values, and sometimes you need one of them exactly: the brand blue from a logo someone sent as a PNG, the background shade of a screenshot you are trying to match in CSS, the skin tone a retoucher wants to reference. This tool reads that value directly. Drop an image, click a pixel, and the exact HEX, RGB, and HSL representations appear with a copy button next to each — no design software, no browser extension, no account.

The claim worth being precise about is exact. Sampling here happens against the image at its native resolution — a hidden canvas holding the original decoded pixels — not against the scaled-down preview you see on screen. The preview is capped for display, but your click is mapped back to source coordinates, so the value you copy is the actual stored pixel from the file, not a resampled approximation. For fine targets like a 1px border or a letterform edge, the zoom loupe that follows your cursor magnifies an 11×11 window of true source pixels with smoothing disabled, so you can see exactly which pixel you are about to sample.

Why your browser's eyedropper gives different numbers

If you have ever picked the "same" colour twice — once with a system eyedropper, once from a screenshot — and got two different hex codes, you have met the difference between screen pixels and file pixels. OS and browser eyedroppers sample what is being displayed: the file's colour after colour management (your monitor profile), display scaling, browser zoom, and any resampling the page applied. A screenshot bakes all of that in. This tool skips the display path entirely and reads the value stored in the file, which is the number that matters when the destination is CSS, a design token, or another image. It is also why comparing values from this page across two computers gives the same answer, while comparing two screen-picked values often does not.

HEX, RGB, or HSL — which one to copy

All three describe the same colour, so the choice is about the job. HEX (#1a6b3f) is the compact interchange form — CSS, design tools, brand guidelines, anywhere a colour is written down. RGB is the same three channels in decimal, useful when code manipulates channels directly or when you need an alpha component (rgba()). HSL is the one to copy when you plan to derive colours: because it separates hue from saturation and lightness, making a hover state 10% darker or building a tint ladder is a single-number edit, where in HEX it is a calculation. A practical workflow for designers pulling a brand palette from a photo or logo: sample the anchor colour, copy HSL, and generate the variants by nudging lightness.

Semi-transparent pixels: raw value, not what you see

PNG and WebP images can store partially transparent pixels, and these are where colour pickers quietly disagree. A 50%-opaque red pixel looks pink over a white page and dark maroon over a black one — but the file stores red, at 50% alpha. When you sample a semi-transparent pixel here, the tool shows the raw stored colour as an rgba() value and tells you the alpha percentage explicitly, rather than silently blending it with whatever background the preview happens to use. If what you actually want is the composited appearance over a specific background, flatten the image onto that background first — otherwise the raw value is the honest answer, and it is the one that round-trips correctly into CSS.

The running palette, and what never leaves your device

Real colour-picking sessions are rarely one click. Pulling a scheme from a photo means sampling the sky, the shadow, the accent, comparing, and re-sampling — so every committed pick joins a running palette of your last eight colours, each one re-copyable with a click, with semi-transparent samples shown over a checkerboard so their alpha stays visible. And because the output of this tool is a handful of colour values rather than a processed file, there is no download step at all: copy is the export. Everything — decoding, sampling, the loupe — runs in your browser through the Canvas API. Unreleased brand artwork, client mockups, and private photos never upload, which you can verify by loading the page and switching off your connection: the picker keeps working. When the palette is done, the same colours are what you would feed into a watermark or the graphics templates in our social media image size guide.