Color Palette from Image

Upload any image and extract the dominant color palette — up to 16 hex, RGB, and HSL swatches.

Colors Limit: 8

Colors to extract: 8

Drop an image here, or click to browse

PNG, JPG, GIF, WebP, SVG

How color extraction works

The image is drawn onto an offscreen canvas and its pixel data sampled. Pixel colors are quantized into a reduced color space (32-level buckets per channel) to cluster similar hues together, then sorted by frequency. Colors that are too similar (Euclidean distance < 48) to an already-selected color are skipped to ensure palette diversity. The result is the n most visually dominant colors in the image.

All processing is done locally in your browser — no image data is uploaded. For related tools see Color Converter, Color Palette Generator, and Color Temperature Converter.

Built and maintained by Meet Shah · Last updated 2 August 2026

What this tool is used for

Extracting a palette from a photograph for a design.
Getting a brand's colours from a logo image when no tokens exist.
Producing a palette that matches a hero image.
Finding the dominant colours in a screenshot.
Building a starting palette from a reference photograph.

Frequently Asked Questions

How are the dominant colours found?: The image is drawn to an offscreen canvas and its pixels read back, then each channel is quantised into 32-level buckets so near-identical pixels collapse into one entry. The buckets are ranked by pixel count, which is what makes the result the most COMMON colours rather than the most vivid.
Why quantise instead of counting exact colours?: Because a photograph has tens of thousands of distinct RGB values and almost none of them repeat. Without bucketing, the top result is a single pixel's colour and the ranking is meaningless. The 32-level grid is coarse enough to cluster a sky into one entry and fine enough to keep it apart from the sea.
What stops the palette being five shades of the same colour?: A diversity filter: any candidate within a Euclidean RGB distance of 48 of an already-chosen swatch is skipped. Without it a photo dominated by one hue returns five nearly identical entries, which is technically the right answer to the question asked and useless as a palette.
Why is the extracted colour duller than what I see?: Because dominance is about area, not attention. A muted background wall occupies far more pixels than a bright accent, so it wins the count. The eye does the opposite — it goes to the saturated small thing. Sort by saturation rather than frequency when you want the accent colour.
Is my image uploaded to extract the colours?: No. It is decoded into a canvas in your own tab and the pixel data is read locally with `getImageData`. That also means the tool works offline and on images you would not upload — client screenshots, unreleased artwork — which is the practical reason to do it this way.

Common errors and gotchas

Extracting from a lossy image, where compression has shifted the colours.
Taking dominant colours as a usable palette without checking contrast between them.
Assuming the most frequent colour is the most important one visually.
Extracting too many swatches, which produces near-duplicates rather than a palette.
Using extracted colours as brand values when the image was already a reproduction.