You need the beige from a client mood board, the red from a competitor banner, or the exact divider gray inside a screenshot. Drop the file here, switch sampling on, tap pixels, then copy codes straight into CSS or Figma. Nothing uploads. After you lock a hero tone, crop tight so the next pass samples fewer mixed edges.
Local decode
Drop a file or tap to browse
PNG, JPEG, WebP, and GIF decode in the page. Very large billboards stutter on phones before the canvas settles.
Block averaging softens noise, which sounds helpful until you stand on a hairline gradient. The tool sums every channel inside the square you choose, then divides. You get a polite middle child color, not the highlight your eye tracked.
We still ship the mode because product teams ask for “something like the header” more often than they ask for a single filament of anti-aliasing.
Interface audits: a PM forwards a PNG of a rival checkout. You sample divider lines, warning oranges, and disabled grays without rebuilding the layout in a design tool.
Photography notes: you liked the teal in frame twelve of a contact sheet. Single-pixel mode grabs the waterline before compression smears it into mush.
Prep for correction: you already know the cast is warm. Sampling gives you numbers you paste into spreadsheets, then you move to color balance when you need sliders instead of a magnifier.
The browser draws your file to a canvas element, then reads the underlying RGBA buffer. Each click or tap maps pointer coordinates to integer pixel indices, respecting the scaled width and height you see on screen. Hex strings come from packed 8-bit channels. HSL values follow the usual conversion math you would write by hand in a shader, only here the work happens in JavaScript on your machine.
| Mode | Best moment | Watch out for |
|---|---|---|
| Single pixel | Flat fills, solid buttons, large type | Anti-aliased curves pick up background bleed |
| Average block | Noisy textures, subtle gradients you want to tame | Wide radius collapses distinct stripes into mud |
CMYK conversions do not live here. Screen RGB never equals ink without a profile chain, so we do not show fake separations.
HDR or wide-gamut files may look flatter after decode because the canvas path follows sRGB assumptions in most browsers.
Animated GIFs render the first frame unless you split them elsewhere first.
Designers often photograph fabric swatches under warehouse lighting, then wonder why CSS looks wrong on a calibrated display. The extractor is honest about the file you gave it, not about the scene you stood in. If you need repeatable measurement, start from a file exported with embedded profile metadata intact, or shoot raw and export sRGB yourself before sampling.
Compression matters too. A JPEG saved at quality forty turns flat red fields into orange dust at the edges. Single-pixel mode reports those specks faithfully, which is either a feature or an annoyance depending on whether you are debugging compression or chasing brand red.
When two teammates disagree about “the same gray,” compare their source files byte for byte. Social apps recompress attachments, email clients strip metadata, and slide decks flatten layers. Sampling from the wrong generation of a PNG is the usual culprit, not the math inside this page.
Sometimes you want sliders without an image at all. Enhanced color picker handles pure color math. When you only need a quick gut check on where pixels bunch, color distribution plots histograms instead of lists.
Short answers tied to how this interface behaves.
The canvas rescales the image to fit the viewport. Pixels are reinterpolated, so coordinates point at slightly different blends. Reload the file after you settle on a layout width, or sample from large flat regions where interpolation changes little.
No. Decode and sampling run in your tab. Closing the page wipes the bitmap from memory unless your browser keeps its own cache for performance.
Some mobile browsers block programmatic copy until you interact directly with a button, and corporate profiles tighten the rule further. Long-press the code text inside your notes app after selecting it manually, or export JSON and pull strings from there.
Here you choose each color deliberately. Palette tools cluster many pixels automatically. Use this page when you care about exact spots, and palette tools when you want the whole scene summarized.
The extra step stops accidental taps while you pan or screenshot on touch devices. Toggle start when you are ready to commit each tap as a swatch.
