Color Picker from Image
Pick colors from any image with an 8× loupe and build a palette of up to 12 swatches — hex, RGB and HSL, exportable as JSON, text or CSS variables.
The image is drawn and sampled locally in your browser. Nothing is uploaded.
Pick colors from an image
Click to choose an image or drag a PNG, JPG, WebP or GIF here
How It Works
The displayed image is scaled down to fit the page, but sampling never trusts that scaled bitmap: a hidden canvas holds the file at its full native resolution, and every cursor position is mapped from screen coordinates into that native grid before a pixel is read.
- From cursor to pixel
- A pick takes the click position relative to the rendered image, multiplies by naturalWidth ÷ renderedWidth, and rounds to a pixel index. Because the rendered size comes from getBoundingClientRect — CSS pixels — the mapping is correct on high-DPI displays too: devicePixelRatio affects how the browser paints, not the fraction your pointer sits across the image. The color itself is read with getImageData from the native-resolution canvas, so what you get is the file's true pixel, not a smoothed preview artifact.
- The loupe and the system eyedropper
- The 8× loupe redraws a 15-pixel window around the cursor with nearest-neighbor scaling so individual pixels stay square and countable, with a crosshair marking the exact sampled pixel and its hex below. Where the EyeDropper API exists, the full-screen button hands the job to the browser's native picker — same coordinate pipeline, but it can reach outside this page entirely.
- Manual picks, no quantization
- Picked colors land in a palette capped at 12 with exact hex duplicates refused, because a photo's edges, gradients and compression noise generate dozens of near-misses that only a human can judge worth keeping. The output — hex, RGB, HSL and JSON/CSS exports — is a list of decisions you actually made.
Frequently Asked Questions
Why do the colors change from pixel to pixel near edges or gradients?
Because that is what real images do: edges are anti-aliased, gradients are dithered, and JPEG compression sprinkles near-neighbour tints around every transition. Picking one pixel off a photo of a red car can honestly return a pink-grey. Use the 8× loupe to land in the middle of a flat area, and take several picks from the same region to judge its dominant color.
What should I do with the picked colors next?
Every swatch carries hex, RGB and HSL, each copyable with a click, and the palette exports as JSON, plain text or CSS custom properties. A sensible next step for UI work is checking text-and-background pairs for legibility with the built-in Color Contrast Checker.
Why doesn't it auto-extract a palette from the whole image?
Deliberately: this tool is a picker, not a quantizer. Automatic palette extraction averages or clusters millions of pixels (median-cut, k-means) and returns representative colors nobody actually chose — often muddy versions of the shades you wanted. Every color in your palette is here because you pointed at it, which is also why duplicates are refused and the cap stays at a deliberate 12.
Where is the full-screen pick button? I do not see it.
It only appears when your browser exposes the EyeDropper API — currently Chrome and Edge on desktop. That button hands picking to the operating-system-grade eyedropper, which can grab any pixel on your screen, not just this image. On Firefox and Safari the button is absent because the API is missing, and the magnifier loupe is the full-featured path.
Is anything uploaded to a server?
No. The image is decoded into a canvas in this tab and every sample is read with getImageData from that local copy. There is no upload, and the page's only job — pixel in, hex out — needs no network at all.