Color Picker from Image
Click anywhere on an image to get that exact color as HEX, RGB or HSL, copied as you click. The whole picture's palette is worked out too, with how much of the image each color covers. Free, and it runs in your browser.
Drop an image here
PNG, JPG, WebP, or GIF
Runs entirely in your browser. Your images are never uploaded to a server.
How it works
- Drop an image onto the box above, or click to choose one.
- Hover over the picture to see the pixels magnified, and click to pick a color. Its code is copied straight away.
- The palette appears too, as a bar showing how much of the image each color covers, then as a list.
- Choose how many colors you want, and whether to read them as HEX, RGB, or HSL.
- Click any swatch to copy that value, or copy the whole palette at once.
Common use cases
- Building a brand palette from a photograph or a piece of artwork.
- Matching a website's colors to a hero image so the page feels of a piece.
- Pulling the exact hex out of a logo when you were only sent a picture of it.
- Finding complementary colors for a design from a reference image.
- Working out what colors dominate a competitor's imagery.
Frequently asked questions
- How do I get the color code from an image?
- Drop the image in and click the exact spot you want. The color under the cursor is copied as a HEX code, or RGB or HSL if you choose, and added to your picked colors so you can compare a few. A magnifier follows the cursor so you can land on a single pixel rather than an edge between two colors.
- Can I pick a color from outside the image, like a website?
- In Chrome and Edge on a computer, yes: use Pick from anywhere on screen, then click any pixel on your screen, in any window. Other browsers do not offer web pages a screen eyedropper yet, so the button only appears where it works. Anywhere else, take a screenshot and drop it in.
- How does it decide which colors matter?
- It groups every pixel by color and repeatedly splits the largest group along whichever channel it varies in most, an approach called median cut. The result is weighted by how much of the image each color actually covers, so a large muted background outranks a tiny bright detail, which matches what a person would call the dominant color.
- Why are the colors slightly different from the pixels in my image?
- Each swatch is the average of a group of similar pixels, not one sampled pixel. That is deliberate: a photograph of a red wall contains thousands of slightly different reds, and the useful answer is the one in the middle of them rather than whichever pixel happened to be picked.
- What is the percentage on each swatch?
- How much of the image that color and its near neighbors account for. The bar at the top shows the same thing proportionally, which is usually the fastest way to see what a picture is really made of.
- Should I use HEX, RGB, or HSL?
- HEX for web and design tools, since it is what most of them expect. RGB when a tool asks for channels separately. HSL when you want to adjust a color by eye: it separates hue from saturation and lightness, so making something a bit darker or a bit less intense is one number rather than three.
- Does it read transparent areas?
- No. Fully transparent pixels are skipped, so a logo on a transparent background gives you the logo's colors rather than a palette half made of nothing.
- Is my image uploaded to a server?
- No. The image is analyzed entirely in your own browser. It never leaves your device, and nothing is stored.
Related tools
Understand what this does
Plain explanations of what is happening to your file, and what it costs you.