Image Color Picker
Image Color Picker — runs in your browser. Inputs are not stored.
Image color picker
Upload an image, then click a pixel to see HEX and RGB.
Enter values, then press Calculate.
How to use
- In Image, choose a file to sample. A preview is drawn on the canvas.
- Click the pixel you want. A crosshair helps you aim.
- In the result, check HEX, RGB, click position (x, y), and the swatch.
- If needed, Copy HEX puts #rrggbb on the clipboard.
- Reset clears the file and result. The image is not sent to a server.
Key concepts
Image color picking reads one pixel at the click coordinates via canvas getImageData. HEX is six hex digits, RGB is three 0–255 values, and position is canvas pixel coordinates. The preview may shrink to a max width of 900 pixels, so coordinates may not be 1:1 with the original. On-screen clicks are mapped to canvas coordinates for the displayed size. If the file fails, a notice says the image cannot be read. Before a click, HEX is empty and copy does nothing. The swatch fills with the chosen HEX.
If you only need a palette, use the color picker; if you only convert RGB↔HEX numbers, use the converter; to remove a solid background, use PNG background transparency. This tool is for sampling brand colors from photos and screenshots. Files open only in the browser. For CSS, Copy HEX is fastest. For canvas or shaders that need RGB, copy the middle field. Coordinates are relative to the scaled canvas and can differ from Photoshop original pixels.
Example
Upload a logo PNG and click a blue area: HEX may be #1a5cff, with RGB and coordinates. Copy HEX into a CSS variable. You can also use the same image in the transparency tool for background clicks. Compressed JPEG edges blur, so click nearby points a few times to compare. Sampling a button color from a UI screenshot to match a design token is a typical use. Even the same blue family can differ by 1–2 HEX on adjacent JPEG pixels.
Related: Color picker · RGB HEX converter · PNG background transparency
Frequently asked questions
Does image color picking use a pixel click?
Yes. After you upload a file, click one point in the preview. Until then, clicks do not change the color. After you change the image, the previous HEX may remain—click again. Reset is the sure way.
Do HEX, RGB, and coordinates appear together?
Yes. Three fields—HEX, RGB, position (x, y)—plus a swatch. Alpha (transparency) is not shown. The position field is for debugging, such as roughly locating an icon on a sprite sheet.
Is there a Copy HEX button?
Yes. After HEX is filled, Copy HEX puts it on the clipboard. Before a click, nothing is copied. Copy targets HEX only. Drag the RGB string from its field.
How does this differ from the color picker?
The picker chooses an arbitrary color and can show HSL. This screen reads a real image pixel and its coordinates. If you need HSL, paste the copied HEX into the color picker’s HEX field.
Is the image uploaded to a server?
No. It is read only on a local canvas. Reset clears the preview. Even large originals are limited to a 900-wide preview, which is usually enough for color samples.
Are coordinates accurate on a scaled preview?
Clicks convert on-screen size to canvas pixels. If width was reduced to 900, coordinates are relative to the scaled canvas. Clicking a transparent pixel yields the stored color without compositing a background. Alpha is discarded.
Last reviewed: 2026-09-04