Image Color Picker
Pick exact colours from any image, in your browser.
Hover to read any pixel as HEX, RGB, HSL, and HSV. Click to collect colours into a palette you can copy or export, or extract a set of dominant colours from the whole image.
The image is read on this page with the Canvas API. It is never uploaded.
Upload
Drop your image here
PNG, JPEG, WebP · up to 25 MB
Upload an image to start picking colours.
About this image colour picker
Upload an image and hover over it to read the exact colour of any pixel as HEX, RGB, HSL, and HSV. Click to collect colours into a palette you can copy or export, or let the tool pull a set of dominant colours out of the whole image. It all runs in your browser with the Canvas API — the image is never uploaded, and there is no colour-analysis API or account.
How to use it
- Drop an image onto the upload area, choose a file, or paste a screenshot with Ctrl/⌘ + V. Small images such as icons are shown enlarged so every pixel can be picked.
- Move the pointer over the image. The magnifier and the readout show the colour under the crosshair.
- Click (or focus the image and press Enter) to add that colour to Selected colours. Use the arrow keys to nudge the crosshair one pixel at a time (hold Shift for ten).
- Copy any value (HEX, RGB, HSL, HSV), copy the whole palette or its CSS variables, or export it as
.txt,.jsonor.css. In Chrome and Edge you can also pick a colour from anywhere on your screen. - Or open Extract dominant colours, pick 5, 8, or 10, and click Extract to see each colour’s share of the image.
How dominant-colour extraction works
The tool samples an even grid of about 20,000 pixels across the whole image, then runs a median-cut quantisation: it repeatedly splits the set of colours along its widest channel at the median until it has the number of buckets you asked for, and averages each bucket. Every sampled pixel is then assigned to its nearest colour, near-identical colours are merged, and the percentage shows how much of the image each colour covers, largest first. It is fully deterministic and needs no machine-learning model or external service. An image with few distinct colours returns fewer than requested.
FAQ
Is my image uploaded anywhere?
No. It is decoded and read on this page with the Canvas API. Nothing is sent to a server.
Why does the HEX sometimes look slightly off from the source file?
JPEG and WebP are lossy, so the decoded pixel can differ a little from the original. PNG is exact. The tool reports the decoded value, which is what a browser actually renders. Semi-transparent pixels can also be off by one in a channel, because browsers store them pre-multiplied by their opacity.
Can I use it with the keyboard only?
Yes. Tab to the image, move the crosshair with the arrow keys (Shift for a bigger step), and press Enter to pick. Every palette action is a normal button.
What formats does it accept?
PNG, JPEG, WebP, and GIF (the first frame).
What do the contrast numbers mean?
They are WCAG 2 contrast ratios for the colour used as text on white and on black. 4.5:1 or more passes AA for normal text, 7:1 passes AAA, and 3:1 is enough only for large or bold text.
What happens with transparent pixels?
The readout shows the pixel’s opacity with HEX8 and RGBA values. Fully transparent pixels are skipped when extracting dominant colours, so a transparent background doesn’t show up as black.
Related image tools
- Hue Shift Generator — recolour an image by rotating its hue.
- Image Splitter — cut an image into a grid or tiles.
- Social Media Image Resizer — crop and export to exact sizes.
- Image Downloader — save an image from a direct URL.
Don't see the tool you need?
Goeroe Digital builds custom calculators, generators, and business tools on request.
Request a Custom ToolThis is a free tool provided by Goeroe Digital. All results, generated files, and figures are estimates or drafts for general informational use only. Goeroe Digital accepts no responsibility or liability for any output, outcome, loss, or decision arising from the use of these free tools — always review the results yourself before relying on them.