Image Color Picker
Upload an image and click any pixel to get its exact color in HEX, RGB, RGBA, HSL and HSV — with a magnifier loupe, an averaged sample size, and a palette you can export as CSS or JSON.
Input
JPG, PNG, GIF, WebP or BMP. Processed entirely in your browser — your image is never uploaded.
Averaging a small block instead of one pixel evens out JPEG noise. Use 1 x 1 when you need the exact pixel, on a screenshot or a flat UI color.
Picked color
Upload an image, then click anywhere on it to read that pixel's color. Everything runs in your browser — your image is never uploaded.
Guides
Pick the exact color of any pixel in an image. Upload a photo, screenshot, logo or mockup, move the pointer over it for a magnified view, and click — you get the color as HEX, RGB, RGBA, HSL and HSV, ready to paste into CSS, a design file or a paint app.
How to use it
- Drop an image into the uploader (JPG, PNG, GIF, WebP or BMP).
- Move the pointer over the image. The magnifier in the corner shows the pixels under the crosshair, zoomed 8x, so you can land on the one you actually want.
- Click to pick. The color appears on the right in five formats — tap any row to copy it.
- Click again anywhere else to add more colors. Every pick is collected into a palette underneath.
Sample size
The Sample size setting decides how many pixels a single click reads:
- 1 x 1 returns the exact pixel. Right for screenshots, flat UI colors, icons and anything where the value is meant to be precise.
- 3 x 3, 5 x 5 and 11 x 11 average a small block around the click instead.
Averaging matters more than it sounds on photographs. JPEG compresses color at a lower resolution than brightness and works in 8x8 blocks, so two neighbouring pixels in what looks like a flat wall can differ by several percent. A 5 x 5 average gives you the color of the region, which is almost always the answer you wanted — the same reason Photoshop's eyedropper has this setting.
Fine-tuning a pick
After picking, the image keeps keyboard focus: press the arrow keys to move the sample point one source pixel at a time, or hold Shift to move ten. This is exact regardless of how far the preview has been scaled down to fit your screen, which a mouse click on a shrunk-down photo can't be.
Exporting the palette
Every pick is appended to the palette (duplicates are skipped). From there you can:
- Click any swatch to copy its HEX value.
- Copy CSS — the whole palette as
:rootcustom properties, ready to paste into a stylesheet. - Copy JSON — an array of HEX strings, for a theme file or a script.
- PNG — a labelled swatch strip you can drop into a document or share.
Is my image uploaded anywhere?
No. The image is decoded and sampled by your own browser using a canvas; nothing is sent to a server, and there is nothing to delete afterwards. That also means the tool works offline once the page has loaded, and there's no file size limit beyond what your device can hold in memory.
What if I want the whole palette at once instead?
Use the Color Palette Extractor, which quantizes an entire image into its dominant colors automatically — no clicking required. If you want the single color that best represents an image (for a background tint or a placeholder), the Image Average Color Finder does that and adds a WCAG contrast readout. To turn a picked HEX into tints and shades for a full scale, try the Color Tint & Shade Generator.