Image Color Picker
Hover over any image with a pixel-zoom loupe and click to collect exact colors, sampled at the image’s original resolution. Image processing stays in your browser; the site may still make page, analytics, or ad requests.
Drop an image here
or click to browse · paste from clipboard (Ctrl+V)
Move over the image to inspect pixels · click to add a color to your list.
#——
Picked colors
Click the image to collect colors.
Click a pixel, get its exact color
Three clicks on this desert shot — the picker reads the true pixel value at the image's original resolution, not a screen approximation.
Picked pixels · original resolution
#7A6048dune shadow#334A66storm sky#B69873sunlit sand11×11 loupe while you hover · click to collect · the preview here is a compressed WebP, so picks from it can differ slightly
A two-color test image with a known answer
A flat test file shows exactly what the picker reads, without guessing about photo noise. Make it in any image editor; no download is needed.
-
Make the input
Create an opaque 200 × 100-pixel PNG. Fill the left half with
#336699and the right half with#FFCC00, with a hard edge and no anti-aliasing. Save it as 8-bit RGB PNG without a color profile, not as JPEG. -
Pick both halves
Load it above and click inside each half. The list shows
#336699and#FFCC00, newest first, and each click also copies that HEX value. Clicking the same spot again adds a duplicate entry. -
Inspect the edge
Hover over the boundary. The loupe shows the 11 × 11 original pixels around the cursor without smoothing, so you see two clean blocks. Repeat the test with a JPEG copy and the edge pixels turn into in-between colors.
What the picker actually reads
The image is drawn twice in your browser: once at its full original size for sampling, and once at up to 1,400 pixels on the longest side for display. Your cursor position is mapped to the full-size copy, so a large photo shown small on screen is still read one original pixel at a time.
- Browser-decoded values. The number is the pixel as your browser decoded it into an sRGB canvas. Embedded color profiles, wide-gamut sources, and the browser’s decoder can make that differ from the value another app reports for the same file.
- No transparency. Only red, green, and blue are kept. A fully transparent pixel is usually reported as
#000000, not as the background you see behind it, so sample an opaque area. - HEX only. Picks are shown and copied as HEX. For RGB, HSL, CMYK, or OKLCH, paste the value into the Code Converter.
- Not saved. The picked list lives only on this page. New Image, Clear List, or reloading the page removes it, so use Copy All before you leave.
- Touch screens. The loupe follows a mouse or trackpad pointer. On a phone, tapping still adds the color under your finger, but you do not get the magnified preview first; zoom the page for more precise taps.
What is an image color picker?
An image color picker (eyedropper) reads the exact color value of any pixel in a picture. Designers use it to match brand colors from logos and screenshots, developers grab precise HEX values for CSS, and artists sample reference photos. This picker shows a magnified 11×11 pixel loupe while you hover, samples at the image's original resolution regardless of how it's scaled on screen, and keeps a running list of your picks until you leave or start a new image.
Why a picked color can look "wrong"
Sometimes you pick a pixel and the result doesn't match what your eye sees. That's almost never a bug — it's one of these:
- Anti-aliasing. Pixels on the edge of any shape or letter are blends of both sides. Pick from the flat center of a region, never the boundary — the zoom loupe exists exactly for this.
- JPEG artifacts. Compression scatters noise around hard edges, so two neighboring pixels in a "solid" area can differ. When it matters, pick from a PNG original instead of a screenshot of a screenshot.
- Context illusions. The same gray reads warm next to blue and cool next to orange — your eye color-corrects, the picker doesn't. The picker is right; trust the number.
- Wide-gamut displays. Browsers read image pixels as sRGB values. A photo taken on a P3 iPhone may look punchier on screen than its sRGB numbers suggest.
For a trustworthy pick: zoom in, confirm the area is uniform, sample two or three nearby spots, and if they agree, convert the result to the format you need in the Code Converter.
Related tools & guides
- How to pick colors from any image — The full workflow: choosing a source image, sampling clean pixels, and turning picks into a palette.
- Photo Palette Extractor — Want the whole picture summarized instead of single pixels? Extract the full palette.
- Color Code Converter — Convert a picked HEX into RGB, HSL, CMYK, or OKLCH with one click.
- HEX vs RGB vs HSL vs OKLCH — What each format is actually for — and which one to store in your design system.
Frequently asked questions
How is this different from the Palette Extractor?
The Palette Extractor analyzes the whole image automatically and returns its dominant colors. The eyedropper is manual and surgical: you choose the exact pixels. Use the extractor for a starting palette and the eyedropper when you need one precise color.
Is the picked color affected by my screen zoom?
No. Clicks are mapped back to the image's native pixel grid, so you get the browser-decoded value of one original pixel, not a scaled or smoothed approximation from the display.
Is my image uploaded?
No. The picker reads the image with the Canvas API in your browser and does not upload it. Page loads, analytics, and ads may still make separate network requests.