Skip to content

How It Works

What happens when you drop an image in.

No model, no API call, no upload. Here is the actual sequence, in order.

1. The image is decoded on your device

Your file goes into an ImageBitmap and then onto a canvas, both of which live in your browser tab. This is the step that makes every claim on this site about privacy true by construction rather than by promise: there is no request to send the image in, because the analysis happens where the image already is.

2. It is scaled down

A 6000 × 4000 photograph is 24 million pixels. The palette from 160,000 of them is indistinguishable, and finding it takes a hundredth of the time. So the image is scaled to roughly 160,000 pixels for analysis, with smoothing on so that the downscale averages rather than drops pixels. A second, larger copy is kept for the picker, so sampling a small detail still lands on the right colour.

3. The colours are counted

Every pixel is dropped into one of 32,768 buckets — a coarse grid over the colour cube. Fully transparent pixels are skipped, so a transparent PNG gives you the colours of its artwork rather than a wash of whatever the canvas was cleared to.

Each bucket also keeps the exact sum of the colours that landed in it, not just how many. That detail matters more than it sounds: rebuilding a colour from the middle of its bucket is off by up to four per channel, which is enough to change the hex you came here to copy.

4. Median cut

The populated part of the colour cube is treated as one box and cut repeatedly. Each time, the box holding the most pixels is split along its widest axis, at the point that puts half its pixels on each side. After a while the split rule changes to favour boxes that are both populous and wide, which is what stops a large smooth gradient from spending every remaining cut subdividing itself.

This is the same family of algorithm image editors have used for decades to reduce a photograph to 256 colours. It is well understood, it is fast, and it is not a guess.

5. Choosing the palette

Palettae asks the quantiser for far more colours than you wanted, then picks from them. The most common colour goes in first. Every slot after that goes to whichever candidate scores highest on

the square root of how many pixels it has, times how far it is from everything already chosen, times how far it is from grey.

Each term is doing a job. The square root lets a small vivid colour compete with a large flat one, without letting a hundred stray pixels win. The distance term spreads the palette out and is what stops five near-identical beiges. The chroma term is what rescues the one red sign in a photograph of a grey street — which, before it was added, Palettae dropped.

6. Prominence

Once the palette is settled, every pixel is assigned to whichever palette colour it is perceptually closest to, and the percentages come from those counts. That is why they add up to 100, and why they change when you add or remove a colour — the palette moved, so the answer moved with it.

Everything after that

  • Contrast uses the WCAG 2.1 relative luminance formula. Nothing is estimated and no pass is claimed that the arithmetic does not give.
  • Palette names come from a hand-written list, scored against the palette’s hue, lightness and saturation and picked deterministically. The generator chooses; it never assembles. That is why you get “Late Checkout” and not “Vibrant Dolphin”.
  • Downloads — the PNG and the share card are drawn on a canvas in your browser, so nothing is rendered on a server.

The one exception

If you paste an image URL, our server fetches that image for you, because your browser is not allowed to. It is checked carefully before we fetch it and it is not stored. Everything else — uploads, drops, pastes and the bundled example — never leaves your device.

Why it is free

  1. The work happens on your computer, so it costs us nothing per use.
  2. There is no model to call and no image storage to pay for.
  3. Advertising covers the hosting. That is the whole business model.

Drop an image in. Get the palette.

Pull the colors out