Color Palette Extractor

Extract dominant colours and HEX values from any image

Click to select or drop an image

How it works

Color Palette Extractor — Extract dominant colours and HEX values from any image. All processing happens in your browser — no upload, no signup, no email required. Free forever.

Last updated: 2026-05-06

Editor's note

We use this on competitor screenshots and product photos to extract palettes for our own brand work, which is the actual reason it exists. Most palette extractors output an unstyled grid with HEX codes underneath in tiny grey type, and you end up squinting and copy-pasting and losing your place. We built ours so the HEX shows on hover right where your cursor already is — the eye is already on the swatch, and forcing it to track down to a caption is a small but real tax that adds up over a long working session.

The other choice we made early was to default to seven swatches, not ten. Tools that surface twelve or sixteen colours by default look more impressive in screenshots but produce palettes nobody can actually use; the long tail is mostly noise pulled from edges and shadows. Seven gives you the dominant story and a couple of accents, which is the shape of a usable palette. You can slide higher when you want inspiration, but the default is the size that ships.

About Color Palette Extractor

Color Palette Extractor pulls the dominant colours out of any image and gives you HEX, RGB, and HSL values you can paste straight into your design system, CSS, or Figma. It's the fastest way to translate a mood photo into a brand palette, match UI accents to a hero image, or sample a competitor's colour story.

Designers building a new brand pull palettes from inspiration boards. Front-end developers grab swatches from a hero image to keep accents in harmony. Marketers extract product colours to seed campaign creatives. Interior designers and stylists do the same with photos of fabrics or rooms.

Sampling runs entirely in the browser via canvas — the inspiration image never leaves your device, which is essential when the source is a private mood board or an unreleased campaign asset.

How to use Color Palette Extractor

Drop an image (photo, illustration, screenshot — anything raster) into the upload zone.
Drag the colour-count slider between 3 and 16 to control how many swatches you want.
Inspect the swatch row — each chip shows its HEX value below.
Click any swatch to copy the HEX. Switch the format selector for RGB or HSL output.
Re-run with a different count to see broader vs. more granular palettes — sometimes 5 swatches tell a cleaner story than 12.

Common use cases

Building a brand palette from a single mood photo for a new client deck.
Picking a CTA button colour that complements a website hero image.
Extracting wardrobe colours from a fashion photo for an e-commerce category page.
Sampling colours from competitor screenshots when running a brand audit.
Generating a Tailwind colour scale from a single source image (extract 5 colours, build tints/shades from each).

Tips & common mistakes

Photographs of nature usually produce richer palettes than screenshots of UI — UI tends to be dominated by white/grey backgrounds.
Crop the image to the area you actually care about before extracting. A full landscape will surface sky and ground; a cropped detail surfaces the subject's colours.
Five to seven colours is the sweet spot for a usable palette. Sixteen is great for inspiration but rarely makes it into a design system as-is.
If the extracted palette feels muddy, increase contrast on the source image first — washed-out photos produce washed-out palettes.

Frequently asked questions

How is the palette computed?

We sample pixels into a coarse 6×6×6 RGB grid, average each bin, and keep the most frequent buckets. Fast and produces visually-grouped colours that match what you'd pick by eye.

How many colours can I get?

Between 3 and 16. Higher counts surface more subtle accents at the cost of less distinct buckets.

Is my image uploaded?

No. Sampling runs in the browser via canvas — nothing is sent.

Can I export the palette to Figma or Adobe?

Not directly yet. For now, copy each HEX and paste them into your tool — Figma's colour styles take HEX directly, and Adobe accepts ASE imports built from a HEX list. A one-click export is on the roadmap.

Why does my photo of a rainbow only return six colours?

Visually similar shades collapse into the same RGB bin during sampling. Increase the colour count to 12 or 16 to surface more nuance, or crop to the region with the most variety.

Are the HEX values exact pixel values?

They're the average of each bin, not a single pixel sample. That's why they look like 'the colour you'd pick by eye' rather than a random pixel that might be from an edge or shadow.