Image Color Picker
Inspect decoded image pixels with HEX, RGB, HSL, alpha and coordinates; export one JSON sample
Move or click to inspect decoded pixels and alpha (0β255). Coordinates start at 0,0 in the top-left. Browser decoding, orientation and color management affect values; these are not the original color-profile data.
Image colors will appear here.
About this tool
Inspect the browser-decoded pixels of a PNG, JPEG, WebP or AVIF image. Pointer positions in the responsive preview map back to the full-resolution canvas. The sample contains uppercase six-digit HEX and RGB for color, HSL rounded to whole degrees and percentages, alpha from 0 through 255, and zero-based X/Y coordinates from the top-left. HEX does not include alpha; read the separate alpha field. A nearest-neighbor magnifier shows a seven-by-seven pixel neighborhood with the selected pixel centered, including at image edges. Export the current single sample as JSON; this is not a multi-color palette extractor. Browser EXIF orientation, color conversion, HDR handling, lossy decoding and alpha rounding can affect the decoded values, so these are not guaranteed original encoded color-channel values or calibrated display measurements. Loading another image clears the old canvas and sample immediately; a late decoder result cannot restore them after clear. Each input must be at most 40 MiB, with no edge above 8192 pixels and no more than 32 million pixels. Files are processed in this tab and are not saved as browser drafts.
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
What do X and Y mean?
They are zero-based coordinates in the decoded image: X increases rightward and Y downward. EXIF orientation may rotate that grid relative to stored JPEG pixels.
Does HEX include transparency?
No. HEX contains RGB only. Alpha is a separate integer from 0 for transparent to 255 for opaque, and is included in exported JSON.
Does the preview sample a scaled screenshot?
No. Pointer coordinates are mapped to the full-resolution decoded canvas, even when CSS makes the preview smaller.
Why can values differ from a source design file?
Browser color management, EXIF orientation, HDR conversion, compression and alpha rounding can change decoded pixels. Sample flat interior areas and verify intended design tokens separately.
Does JSON contain a complete palette?
It contains only the currently selected sample, including color fields, alpha and coordinates. Save multiple samples separately if needed.
Are pixel values or filenames included in analytics?
No. A successful manual sample records only the action, once per loaded image. Built-in examples do not count as manual results.
Keep browsing