Image Color Picker
Inspect exact image pixels with a magnifier and export HEX, RGB, HSL, alpha, and coordinates
Move or click over the image; the magnifier shows nearby pixels.
Image colors will appear here.
About this tool
Image Color Picker decodes a local PNG, JPEG, WebP, or AVIF file into a browser Canvas and lets you inspect exact source pixels. Pointer coordinates are mapped from the responsive preview back to the full-resolution image, so the displayed HEX, RGB, HSL, alpha, and X/Y values come from the original pixel grid rather than a CSS-scaled screenshot. A nearest-neighbor magnifier displays the surrounding seven-by-seven pixel area, and the selected sample can be exported as JSON. Canvas sampling reports encoded pixel values after browser decoding; color profiles, HDR tone mapping, premultiplied alpha, display calibration, and lossy compression can make a visual swatch differ from a design-system source value. The image never leaves the browser.
Scenario Recipes
Verify an implementation color from a delivered screenshot
Goal: Collect pixel evidence without confusing it with the original design token
- Open the highest-quality available screenshot and sample several pixels from the flat interior of the target region.
- Compare HEX and RGB values while avoiding antialiased edges, shadows, and compression blocks.
- Record the coordinates and exported sample, then confirm the intended token in the source design system before changing code.
Result: A reproducible pixel sample that supports, but does not replace, design-token verification.
Frequently Asked Questions
Does it sample the full-resolution image?
Yes. Pointer positions on the scaled preview are mapped back to the Canvas source pixel grid.
What color values are shown?
The inspector reports uppercase HEX, RGB, HSL, alpha, and exact X/Y pixel coordinates.
What does the magnifier display?
It shows a nearest-neighbor enlargement of the seven-by-seven pixel area around the pointer.
Why can the sampled value differ from a design file?
Color profiles, browser decoding, display calibration, HDR mapping, and lossy compression can alter observed pixels.
Can I export a selected color?
Yes. Export creates a local JSON file containing every reported field.
Is the image uploaded?
No. Decoding, Canvas sampling, magnification, and export all run locally.
Keep browsing