palette Image Color Palette Extractor star

Why You Can't Just Count Pixels

The obvious way to find a photo's dominant colors sounds simple: count how many pixels are each exact color, and keep whichever colors appear most often. In practice this fails almost immediately. A digital photo of a blue sky, for instance, is not one flat blue — it's thousands of subtly different blues, shifting pixel by pixel because of sensor noise, natural light gradients, and JPEG compression artifacts. Two adjacent sky pixels might be rgb(91, 148, 214) and rgb(92, 149, 213): visually identical, numerically distinct. Counted as exact values, neither is "the most common color" — each might appear only once or twice, buried among thousands of near-identical-but-technically-different blues. The naive approach returns noise, not a palette.

The fix is to stop counting exact pixel values and start counting buckets of similar colors. This tool divides each of the red, green and blue channels — normally ranging from 0 to 255 — into 8 equal bands of 32 values, using Math.floor(value / 32) * 32 on every channel. That turns 16.7 million possible RGB combinations into a manageable grid of 8 × 8 × 8 = 512 buckets. Every pixel in the resized image lands in exactly one bucket based on which band its red, green and blue values fall into, and a running tally is kept — using a plain object as a hash map — of how many pixels land in each one, plus a running sum of their actual red, green and blue values.

From Buckets to a Palette

Once every pixel has been counted, the buckets are sorted by population and the 6 to 8 most populous ones are kept. But the color shown for each bucket is not simply the bucket's numeric boundary (say, "224-255 red, 128-159 green, 0-31 blue") — that would just be a somewhat arbitrary corner of a 32×32×32 cube. Instead, this tool computes the true average red, green and blue value of every pixel that actually landed inside that bucket, which is much closer to what the eye perceives as the representative color of that region of the image.

This histogram-binning approach is a deliberately simple form of color quantization — reducing a large set of colors to a small representative set. A more sophisticated classic alternative is median-cut, defined by Paul Heckbert in his 1980 master's thesis at MIT, which recursively splits the color space along its widest dimension rather than using fixed-size boxes; it's still the technique behind how GIF images are reduced to a 256-color palette. Median-cut generally produces more perceptually accurate palettes for complex images, at the cost of more implementation complexity. Fixed-grid histogram binning, used here, is simpler to reason about and fast enough to run instantly in the browser, which is the trade-off this tool makes.

Before any counting happens, the uploaded image is first scaled down so its width doesn't exceed 200 pixels, using the HTML5 canvas API. This cuts the pixels that need to be read and bucketed by a large factor, and barely affects the resulting palette, since color buckets track broad regions of hue, not fine detail. The entire process — drawing the image, resizing it, reading pixel data with getImageData(), and computing bucket averages — happens locally in the browser's memory. The photo is never uploaded to any server.