Extract the colour palette of a PNG

Median-cut quantisation finds the colours that actually make up the picture, ranked by how much of it they cover. Copy the hex codes, drop the CSS variables into a stylesheet, or keep the swatch card.

PNG

drop it. goon.

drop your images here, or paste them. you know you want to.

stays in your browser. nothing leaves. nothing is watching.

how to extract the colour palette of a PNG

  1. 1Drop your images.
  2. 2Choose how many colours and which files you want.
  3. 3press goon and download.

questions

Why are near-identical colours merged?
So you get a usable palette rather than six shades of the same beige. Ask for more colours to see finer splits.
Is anything uploaded?
No. The whole tool runs in your browser tab. Files never leave your device.
Is it really private?
Yes. The tool is code that runs in your browser tab. Your PNGs are never sent to a server. Open the network tab and check. Nobody is watching. Goon in peace.

Real colours, ranked by how much they cover

A median-cut quantiser splits the image’s colour space where it is widest, so the result is the set of colours that actually make up the picture, not an average of everything. Near-identical shades are merged and each swatch shows how much of the image it covers.

Straight into your stylesheet

The CSS file is a :root block with one custom property per colour; the JSON has hex, RGB and share values for scripts; the swatch card is a PNG you can drop into a mood board or a brand deck.

more PNG tools. you know you want to.

all PNG tools →