How to extract a color palette from an image

Updated 2026-09-14 · 2 min read · by the ColorSwoop team

A photo you love is a palette waiting to be extracted. Here is how to do it in ten seconds, and how to turn the raw result into something you can design with.

Step 1: extract

Open the image to palette tool, drop a photo (or paste one from the clipboard) and choose how many colors you want. The tool runs entirely in your browser: it samples a few thousand pixels, groups them with a k-means clustering pass and sorts the groups by how much of the image they cover.

A slice of peach tart on a white plate — One of the tool's sample photos. Drop your own, or click a sample to try it.

What the tool pulls out of it, five colors

#F4E7D3 #E0A458 #B5651D #6B3E26 #3A3335

Pastry, peach and shadow: warm, dominant cream, a caramel accent.

Step 2: read the result

The first colors are the dominant ones (sky, wall, skin, shadow) and the last are accents. Dominant colors make good backgrounds; accents make good buttons. If everything looks muddy, raise the color count to 6–8 so smaller but more saturated clusters appear.

Five colors from the meadow

#DCE7EE #9DB86A #5E8A3A #3E5B2A #2B3A20

Landscapes give a lightness ladder of one hue — moody, with the sky as the only neutral.

✕ Three colors: only the big areas

#DCE7EE #7FA04E #3E5B2A

✓ Six colors: the accent surfaces

#DCE7EE #9DB86A #5E8A3A #3E5B2A #E7B84A #2B3A20

The same photo at two color counts. The small saturated cluster — the flowers — only appears once there is room for it.

Step 3: clean it up

An extracted palette is raw material. Three moves turn it into a scheme:

Click Open in generator. Lock the two or three colors you like.
Press space to regenerate the rest in harmony with the locked ones.
Use + and − to push a dominant color lighter for a background or darker for text.

✕ Raw extraction

#F4E7D3 #E0A458 #B5651D #6B3E26 #3A3335

✓ After the generator: a background, a text color, an accent

#FBF6EE #E0A458 #B5651D #2B211D

The tart palette before and after. The cream became a near-white, the shadow became a text color, and the caramel stayed as the accent.

Step 4: export

Copy CSS variables, Tailwind config or all hex codes, or download a PNG swatch to share with a client.

Tips for better source images

Crop to the area whose colors you want; a large sky will dominate otherwise.
Avoid heavy filters; they compress the color range.
Interior and product photos usually give the most usable palettes; landscapes give the moodiest.

Privacy

Images never leave your device. The extraction uses the browser canvas, so it works offline once the page has loaded.

FAQ

How do I get the color palette from a photo?

Upload the photo to the ColorSwoop image tool. It samples the pixels, groups similar colors with a clustering algorithm and returns the 3-8 most representative colors with hex codes. Nothing is uploaded to a server.

Why does the extracted palette look dull?

Photos are dominated by mid-tones and shadows, so the biggest color clusters are often muted. Increase the number of colors to surface the accents, then open the result in the generator to adjust saturation.

Can I extract colors from a logo or screenshot?

Yes. Flat images with few colors give the cleanest results. For a logo, 3-4 colors is usually enough.