How to use the Image to Palette Extractor
- Load a picture. Drop it on the box, click to choose a file, or paste a screenshot with Ctrl+V. The built-in sunset sample shows how the results look before you add your own. Everything is read on your device; the image is never uploaded anywhere.
- Set the number of colors. Drag the slider anywhere from 3 to 12. The proportion bar and the list update instantly, ordered from the largest share of the picture to the smallest, and a small dot on the image marks where each color is most typical.
- Click the image for an exact pixel. The picked color appears under the list with its HEX, RGB and HSL values. You can also focus the image and nudge the picker with the arrow keys. Add to palette puts that pixel next to the extracted colors.
- Export. Copy the HEX list or CSS variables, download a PNG palette card, a 1000 × 1500 Pinterest pin with your image above the swatches, or an Adobe
.asefile. Open in Palette Generator hands up to eight colors to the Color Palette Generator for locking and remixing.
What “dominant colors” really means
A photo straight off a phone often has around 12 million pixels and easily tens of thousands of distinct values. To find the colors that matter, the extractor first shrinks a working copy so its longest side is 220 pixels — a 3:2 photo becomes 220 × 147, or 32,340 pixels. That is plenty for color statistics and keeps the whole job well under a second, even for a 4000 × 3000 file.
Those pixels are then sorted into 32 levels per channel — 32,768 possible buckets — and each bucket remembers how many pixels fell into it. The clustering step, called k-means, looks for the requested number of centers that sit as close as possible to all those pixels. It works in CIELAB rather than RGB because Lab is laid out so that equal distances roughly match equal visible differences; in RGB, a step in the greens looks much smaller than the same step in the blues. The starting centers are chosen with the k-means++ method, which picks each new center with a probability that grows with its squared distance from the ones already chosen, and the whole search runs three times, keeping the tightest result.
The share next to each color is simply the fraction of pixels assigned to it, so it reads like a recipe for the picture: “about half deep red, a quarter blue”.
Average colors versus real pixels
Every extracted color is an average of a group, and an average can land on a color that appears nowhere in the image. A quick test makes the point. Take a picture that is 50% red, 25% blue, about 19% bright yellow and 6% dark green. Ask for four colors and the extractor returns all four exactly, with those shares. Ask for three and the yellow and green have to share a cluster — the result is a sharp yellow-green around #C6D800 that no pixel in the picture actually has.
That is not a flaw; it is what a palette is. A painter mixing “the overall color of that field” wants the average, not the one sunlit blade of grass. But when you need a precise value — a logo, a fabric swatch, the exact sky color behind a figure — click the image and use the picked pixel instead.
| You want… | Use |
|---|---|
| The overall mood or a mixing palette for a study | Extracted colors, 5–8 of them |
| Accent colors that cover small areas | More colors (9–12), then keep only the ones you need |
| One exact value to match | Click the pixel, then Copy |
| A web theme from a photo | 4–6 colors, then check text pairs for contrast |
Tips from practice
Crop before you extract. Borders, white gallery walls and phone status bars count as pixels. A tight crop of the artwork itself gives you its palette instead of the room’s.
Small accents need a higher count. A red scarf covering 2% of a photo can disappear into a neighboring cluster at five colors. Push the slider up until it pops out, or simply click it.
Photograph paintings in even, neutral light. Warm room lighting shifts every extracted color toward orange. Daylight from a window, without direct sun, gives the most faithful palette from a phone snapshot.
Expect JPEG noise in flat areas. Heavily compressed images add faint blocks of slightly different color. If two extracted swatches look almost identical, that is usually the cause — lower the count by one.
Compare values, not just hues. After extracting, run the same image through the Notan & Value Study Tool. Many photos that feel colorful are built on just three values, and matching that structure matters more than matching every hue.