Palette extractor

Color tools

Extract a dominant color palette from any image.

Updated May 17, 2026

Upload an image

Drop a PNG, JPG or WebP here

Swatch count

Quick start

How to extract a colour palette from an image

Drop an image, get the dominant colours as hex values you can copy. Everything in your browser.

Step 1

Drop image

Drag any PNG, JPG, WebP or AVIF into the zone — or click to choose a file.
Step 2

Pick swatch count

Default is 8. Bump higher for richer photos, lower for flat illustrations.
Step 3

Copy colours

Click any swatch to copy its hex, or 'Copy all' to grab the full palette as a CSS list.

In-depth guide

Palette extractor — get dominant colours from an image

Drop in any image and pull out its dominant colours as ready-to-copy hex values. Useful for building palettes from photos, screenshots, brand assets or reference art. Nothing uploads anywhere — extraction runs in your browser using canvas pixel sampling.

How it works

Image is loaded into a hidden canvas and downscaled to 200px on the long edge.
Each pixel's RGB channels are snapped to 5 bits (32 levels per channel = 32,768 buckets).
Buckets are tallied; the N most-frequent are returned with their averaged centre colour.
Transparent pixels (alpha < 200) are excluded so cut-outs don't pollute the palette.

It's a frequency-based quantiser — fast, simple and dependency-free. For perceptually-tighter palettes use a k-means tool.

Use cases

Building a design palette from a moodboard or photo.
Picking accent colours from a hero image.
Identifying brand colours from a screenshot.
Generating colour suggestions for data viz themes.
Reverse-engineering an old logo's colour spec.

Tips for better palettes

Crop first if you want colours from just one part of the image — a hero subject vs the background.
Raise swatch count for richer photos; lower it for flat illustrations.
Compare to the OKLCH values in the color-picker tool to see which swatches are perceptually distinct vs near-duplicates.
For brand work, sample multiple reference images and intersect the results — single-image palettes can over-represent backgrounds.

Frequently asked questions

Does this tool upload my image anywhere?

No. The image is read with FileReader, drawn into a hidden canvas, and pixel-sampled in memory. Nothing leaves your browser.

How are the colours chosen?

We downsample the image to 200px on the long edge, then quantise each pixel by snapping RGB channels to 5 bits each (32 levels). The most-frequent buckets become the palette, averaged back to their true centre.

Is this k-means clustering?

No — it's simpler frequency-based quantisation. k-means would give marginally better perceptual results but is 10-100× slower and needs a few iterations. For 'roughly what colours are in this image' our approach is instant and good enough.

Why does my palette include near-duplicates?

The 5-bit quantisation buckets pixels by raw RGB closeness — two perceptually-similar shades may land in different buckets. Increase the swatch count or use a real k-means tool for smoother palettes.

Does it ignore transparent pixels?

Yes — pixels with alpha below 200 are excluded so a logo's transparent background doesn't dominate the palette.

What's the max image size?

Any browser-loadable image works (PNG, JPG, WebP, GIF, AVIF). We downscale internally to keep extraction under 100ms on a typical laptop.

Keep exploring