Free tool
Image Colour Picker With a Magnifier and Picture Palette
Open a logo, screenshot or photo and click to read the exact colour of any pixel. The tool also builds a palette from the whole picture, so you can match a site to an image.
Click to pick a colour. After a click, arrow keys move one pixel (Shift moves 10) and Enter keeps the colour.
Palette of the picture
Picked
Colours you click are kept here, also for next time.
Colours are read in your browser and the picture is never uploaded. Only the colour codes you pick are kept on this device, never the picture.
Matching a colour you only have as a picture
A client sends a logo as a flattened PNG and no brand file. A designer wants the green from a product photo for a button. You need the code, and the picture is all you have. Drop it onto the page, click to choose it, or paste a screenshot. JPG, PNG, WebP, GIF and HEIC files are accepted.
A magnifier follows the pointer so you can aim at one pixel. Click to keep the colour. After a click, the arrow keys move the point by one pixel, Shift moves it by ten, and Enter keeps the colour.
What you get for each pick
A picked colour is shown as HEX, RGB, HSL, HSV and CMYK, plus the closest CSS colour name. Click a value to copy it. Picked colours collect in a list on the page, and the list can be copied all at once, copied as CSS, or cleared.
The CMYK figure uses the plain formula with no printer profile, so a print shop may convert differently.
Where your browser supports it, the Pick from anywhere on screen button opens the system eyedropper, so you can sample a colour outside the picture, even from another window.
One pixel or an average
| Sample | What it reads | Choose it for |
|---|---|---|
| 1 pixel, exact | The single pixel under the point | Flat graphics, logos, screenshots |
| 3 x 3 average | The mean of nine pixels | Lightly noisy photos |
| 5 x 5 average | The mean of twenty-five pixels | Grainy photos and compressed JPG files |
JPG compression and film grain make neighbouring pixels differ slightly. An exact pick on such a picture can land on an odd speck. An average gives the colour your eye actually sees there.
A palette from the whole picture
The palette block groups the picture into 4, 5, 6, 8 or 10 colours. It uses a clustering method on a shrunk copy of the picture, and each swatch shows how much of the picture it covers. The biggest swatch is the colour that dominates, which is often the background rather than the subject.
You can copy the palette as CSS or JSON, or download the swatches as a PNG. If the result needs refining, take the main colour to a palette tool and build around it. If the colours you pulled out belong to a site that no longer feels right, our guide to the signs your website needs a redesign helps you decide what to do next.
Rebuilding a brand colour list from artwork
When there is no brand guide, you can rebuild a short one from the artwork. Pick the main logo colour with a one pixel sample from a flat area. Pick the background colour the same way. Then pick one or two supporting colours from other assets, such as a packaging shot or a banner.
- Pick each colour twice, in two different places, and confirm the codes match.
- Use Copy as CSS to export the list.
- Write down where each colour came from, so the next person can check it.
Keep in mind that a logo exported for the web may have been changed slightly when it was saved, so ask the client for the original vector file when you can.
Habits that give cleaner picks
- Use the original file, not a screenshot of it, when you can. A screenshot is a copy and may not hold the exact values of the original.
- Zoom in on the area first. The magnifier helps, but a larger picture means less guessing.
- For anti-aliased edges, pick from the middle of a shape rather than its outline.
- Pick two or three points in the same area and compare them before you commit.
This tool reads the colours stored in the file. If a screen shows the picture with a different colour profile, the number can still be right for the file and look different elsewhere.
Frequently asked questions
How do I get the HEX code of a colour in a picture?
Open the picture, click the pixel you want and read the HEX value in the picked colour panel. Click it to copy.
Why do two clicks next to each other give different colours?
Photos and compressed pictures vary from pixel to pixel. Switch Sample to a 3 x 3 or 5 x 5 average for a steadier result.
Is my logo or photo sent to a server when I open it?
No. The picture is read on your own computer and is not sent anywhere.
Can I pick a colour from outside the picture?
In browsers that offer an eyedropper, the Pick from anywhere on screen button lets you sample any visible pixel. Where it is missing, only the picture can be sampled.
How many colours can the palette hold?
You can ask for 4, 5, 6, 8 or 10 colours. Each swatch shows its share of the picture.
Are my picked colours kept?
Yes, as colour codes on this device, so they are there next time. The picture itself is never saved.
More free tools
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- HEX to RGB converter: Convert a colour between HEX, RGB, HSL, HWB, OKLCH and CMYK, singly or as a list.
- Colour blindness simulator: See a picture or colour list as protanopia, deuteranopia, tritanopia or greyscale, with a strength slider.
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.