How to extract a color palette from an image

Updated 2026-09-12 · 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.

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.

Step 3: clean it up

• 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.
• Check the text pair in the contrast checker.

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