Color Palette Extractor
Extract a clean color palette from any image using median-cut quantization.
Written by Anil Gautam · Updated
How does median cut choose the palette colors?
The tool first shrinks your image to fit inside 200 × 200 pixels and reads every fourth pixel. Pixels with an alpha value below 200 (out of 255) are skipped, so the transparent area around a PNG logo never turns into a swatch. Median cut then puts all sampled pixels in one box, finds whichever channel (red, green or blue) has the widest range of values, sorts the pixels along it and splits the box at the median. Each new box is split the same way until there are enough, and every swatch is the average color of one box.
Take a 1600 × 900 photo with the slider at 8. It is drawn at 200 × 113, which gives 5,650 samples, and three rounds of splitting leave 8 boxes of 706 or 707 samples each. When the count is not a power of two, the tool builds the next power up and lists only as many boxes as you asked for: 5 colors means 8 boxes with 5 shown, and 3 colors means 4 boxes with 3 shown.
Why do some colors repeat while small accents vanish?
Because every split happens at the median, each box ends up with the same share of the sampled pixels. At 8 colors each swatch stands for one eighth of the image, so the list is not a ranking of which color dominates. A color that fills most of the picture takes several swatches, often near-identical shades, and flat graphics can show the very same HEX code more than once. Anything covering less than one box's share is likely to be averaged with its neighbors.
An image that is 70% flat blue, 25% green and 5% red shows the effect. At 8 colors the blue fills five swatches, the green gets one, and the other two are blends, one of them a muddy brown made from red and green pixels averaged together, so pure red never appears. With the slider at 16, each box holds half as many samples and a reddish swatch shows up. For brand accents, start near the top of the slider and keep only the swatches you need.
How do you copy a code or change the number of colors?
The palette is calculated when the image loads and again whenever you move the slider, from the same sampled pixels, so you can drop the image once and compare counts from 3 to 16. Copy puts the HEX code on your clipboard in lowercase, such as #3a7bd5, although the card shows capitals; CSS and design apps accept either. The rgb() line under each code is plain text you can select.
A swatch is an average of many pixels and may not match any single pixel in the file. To read one exact spot, such as a button color in a screenshot, use the Image Color Picker.