Color Palette from Image
Pull the dominant colors out of a photo without uploading it.
Color Palette from Image: the tool
Image
or drop a picture here. It is read in this page and never uploaded.
Palette
, by pixels. Press a point of the picture to read its color (pointer only; the palette needs no pointer).
Choose a photo, a logo, a painting or a screenshot and get the colors that dominate it, each with its HEX code and the share of the picture it covers. Use them as a palette for a design, a brand or a room. The picture is opened and analyzed inside this page: it is never uploaded, so it is safe to use with private or unreleased images.
How it works
The picture is first shrunk so that its longest side is 160 pixels, which keeps the analysis fast and loses nothing that matters for dominant colors. Pixels that are mostly transparent are left out, so a logo on a clear background gives the colors of the logo and not of the empty space around it.
The remaining colors are sorted into groups by median cut. All the colors start in one box. The box whose colors are most spread out is cut in two at the middle of its widest channel, again and again, until there are more boxes than colors you asked for. Each box is then summed up as one color, the average of the pixels in it, which is why the colors are real colors of the picture and not blends invented between them.
Boxes whose colors are nearly the same, such as two shades of one sky, are merged, because a palette with two almost identical blues helps nobody. The biggest groups are kept, smaller ones are counted toward the nearest kept color, and the shares add up to 100%. That is also why the tool sometimes returns fewer colors than you asked for: the picture does not have that many clearly different ones.
The share shown for each color is the part of the visible pixels it stands for. A color with a small share can still matter a great deal to the eye, as a red door on a grey house does, so the palette is ordered by share but is not a ranking of importance.
How to use it
- Press Choose an image, or drop a picture onto the page.
- Pick how many colors to find, from 2 to 12. The palette updates at once.
- Press a point of the picture to read the exact color there, and add it to the palette if you want it.
- Copy the HEX codes or any value in the table, export the palette as CSS or an image, or save it in this browser.
Example
A small test picture, made of three areas of flat color in known proportions, run through the same code that analyzes your picture. A real photograph has many more colors, and they are merged in the same way.
What was set
- Picture
- A test picture of 80 by 40 pixels: half deep blue, 30% sand and 20% dark green
- Colors to find
- 3
What came out
- Color 1
- #1E6FB8 · 50% of the image
- Color 2
- #E8C27A · 30% of the image
- Color 3
- #2F5D3A · 20% of the image
Good to know
- The file can be up to 30 MB and 120 million pixels, and you can ask for from 2 to 12 colors.
- JPEG, PNG, WebP and GIF open in every current browser, and AVIF in most. An animated GIF is read from its first frame. HEIC photos from some phones cannot be opened by most browsers: export them as JPEG first.
- The colors are counted, not judged. A palette from a photograph reflects what covers the most area, which may be a shadow or a wall, and not what a person would call the main color.
- Colors are read as the browser shows the picture, converted to the standard sRGB space. A picture with a wide-gamut profile can therefore give slightly different values from an editor that reads the profile itself.
Questions people ask
Is my image uploaded anywhere?
No. The file is opened with your browser's own image decoder and drawn on a canvas inside the page. No part of the picture, and none of its colors, is sent over the network, and nothing about it is kept once you close the tab.
Why did I get fewer colors than I asked for?
Colors that look nearly the same are merged, so a picture with a few clear colors gives only a few. A flat logo with three colors gives three even when you ask for twelve. A notice above the palette says when this has happened.
How are the dominant colors chosen?
By median cut, a classic method also used to reduce the colors of an image: the colors are repeatedly split into groups at the middle of their widest channel, and each group becomes the average color of its pixels. The result does not depend on the order of the pixels.
Can I pick one particular color from the picture?
Yes. Press the point you want in the preview and its exact color appears with a Copy button and an Add to palette button. This works with a pointer only, so keyboard users can rely on the palette that is found automatically.
Does a bigger picture give a better palette?
Not usually. The picture is reduced to 160 pixels on its longest side before it is analyzed, so a huge photograph and a small copy of it give nearly the same palette. A very large file only takes longer to open.