Color Palette from Image

How Color Extraction Works

Color extraction is color quantization: reducing millions of colors to a small representative set. The algorithm on this page is deterministic. It runs the same input to the same output every time.

The pipeline has four steps. First, the image is downscaled to 200 pixels wide. Downscaling is a low-pass filter: it averages neighboring pixels, removes noise, and shrinks the input from millions of pixels to a few thousand. The result is faster processing with no loss of palette fidelity, because the dominant colors survive averaging while one-off pixels do not.

Second, every pixel is dropped into a color cube. The cube has 4 bits per channel, or 16 levels of red, 16 of green, and 16 of blue, for 4096 buckets total. Each pixel increments a counter in its bucket and adds its color to a running sum. Transparent pixels (alpha below 128) are skipped so PNGs with transparency do not pollute the palette with edge colors.

Third, the buckets are sorted by count, and the top N times two are averaged. Averaging within a bucket smooths the quantization noise: instead of picking one pixel from a bucket that may contain a hundred slightly different colors, the algorithm returns the average, which is closer to what the eye saw in the original image.

Fourth, near-duplicates are removed. Two buckets whose averaged colors sit within an RGB distance of 30 are merged, keeping the one that appeared first. The result is a short palette of visually distinct colors, sorted by how often each one appeared. The MDN reference on pixel manipulation with the Canvas API documents the getImageData call the algorithm relies on.

Related Tools

Pick from a curated palette, verify contrast on the extracted colors, or drop the palette into a real layout in the playground.