Color Palette Extractor
Pull the dominant colors out of an image as copyable swatches.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
PNG, JPG, WEBP, or HEIC
Your file never leaves your browser during processing
How it works
To extract a color palette, drop an image onto this page — the dominant colors are computed locally from the pixel data and shown as swatches with hex and RGB values, each copyable, with nothing uploaded.
The image is decoded and drawn onto a small offscreen canvas, then every visible pixel’s color is read back with the Canvas API’s getImageData. Those colors are grouped using median-cut quantization: the algorithm repeatedly splits the widest color range in half until it has as many groups as swatches you asked for, then averages each group into one representative color. It’s the same family of technique image editors have used for decades to reduce a photo to a limited palette.
The image is downscaled before sampling — a few hundred pixels per side is plenty to find the dominant colors in almost any photo, and it keeps the quantization step fast regardless of how large the original file is. Fully transparent pixels are skipped so a transparent background never crowds out the actual subject.
Results are sorted by how much of the image each color covers, so the first swatch is genuinely the most dominant one, not just whichever the algorithm found first.
FAQ
How many colors can I extract?
Choose 4, 6, or 8 swatches. More swatches split fine color variation into separate entries; fewer collapses similar shades together.
Can I use the palette straight in CSS?
Yes — the "Copy as CSS variables" button copies all current swatches as a ready-to-paste :root block with --color-1, --color-2, and so on.
Does this work with HEIC photos?
Yes. Images are decoded the same way as the site’s HEIC converters, so an iPhone photo works without converting it first.