Extract a Color Palette from Any Image

Guide: pulling a usable colour palette out of a photo

How the colours are picked

When you add an image, the tool shrinks a copy so that its longest side is 150 pixels and reads the colour of every pixel in that copy. Pixels that are mostly transparent are skipped, which is useful for logos saved as PNG. It then runs k-means clustering for 12 rounds: similar colours are grouped together, and the average colour of each group becomes one swatch. Swatches are sorted by how many pixels belong to them, so the first swatch is the most common colour in the image.

You can choose 3, 5, 6, 8 or 10 colours, with 6 selected at the start. Changing the number recalculates from the same sample, so you do not need to upload again. Each swatch shows its HEX and RGB values; clicking a swatch copies the HEX code, and Copy as CSS variables copies a ready-made block that starts with :root and lists --color-1, --color-2 and so on. Everything runs in your browser.

Why the swatches can vary between runs

The starting points for the grouping are chosen partly at random, so running the same image again, or switching between counts, can give slightly different shades. This is most noticeable on images with smooth gradients such as sunsets or skin. When you find a palette you like, copy the codes and save them instead of relying on getting the same result later.

Each swatch is an average, so it may not match any single pixel exactly. Small, bright details, such as a red logo on a large white page, can be absorbed into a neighbouring colour when you ask for only 3 or 5 colours. Raise the count to 8 or 10 to pick them up.

Practical uses

• Matching the text and background colours of a YouTube thumbnail to a frame from the video.
• Finding the colours of an existing logo when nobody has the brand codes.
• Keeping an Instagram grid consistent by reusing colours from your best post.
• Building a wedding invite or festival offer poster around the colours of a saree, lehenga or product photo.
• Setting a website or presentation theme from a product photo using the CSS variables.

Getting a cleaner palette

• Crop to the part of the image you care about with the Crop tool. Otherwise a large sky, wall or white background will take up several swatches.
• For logos, use a PNG with a transparent background, or crop tightly, so the empty area is not counted.
• Grainy low-light photos give muddy averages. A clear, well-lit image gives cleaner colours.
• Use fewer colours for the overall mood of an image and more when you need accents and shadows.

From swatches to a design

A common approach is to use one light or neutral swatch for large backgrounds, one darker swatch for text, and one strong swatch sparingly for buttons, highlights or a price tag. The tool labels each swatch in black or white depending on how bright it is, which is a helpful hint, but it is not a full accessibility check. Before you use a pair of colours for body text, test the contrast with a dedicated contrast checker, especially for text that will be read on phones.

Common mistakes

• Treating the first swatch as the brand colour. It is only the most common one, often the background.
• Expecting identical shades on every run of a gradient-heavy image.
• Uploading a screenshot with browser bars and taskbars, which add greys and blues that are not part of the design.
• Assuming every combination of extracted colours is readable as text on top of each other.

Related guides

• Best Color Combinations for Social Media Posts
• How Professional Designers Edit Images Faster