How to pull a colour palette from an image

Extracting a palette takes about four seconds. Getting a palette you actually want takes a little judgement about which image you feed it and what you do with the result. Here is both.

Choose the image before you blame the tool

The single biggest factor in the quality of an extracted palette is the crop. A wide shot of a room gives you the room: wall, floor, ceiling, and a fifth colour that is the average of everything else. A tighter crop on the part you actually liked gives you the colours you actually liked.

So before you upload, ask what in this picture you are trying to keep. If the answer is a corner of it, crop to that corner first. It is a thirty-second edit that changes the result more than any setting on this page.

Start at six

Six colours is enough to describe most images and small enough to still be a palette rather than a list. Move to eight or ten if the image is busy or you want to build tints and shades from a wider base. Drop to three or five if you are after the gist — a mood, not a specification.

If two swatches look the same to you, ask for fewer colours, not more. The palette spreads further apart.

Read the percentages

The number on each swatch is the share of the image nearest to that colour, and they add up to 100. This is more useful than it first looks. A colour at 40% is the image's ground; a colour at 4% is its accent. That is a ready-made hierarchy — background, surface, text, accent — handed to you in the right proportions.

It is also a warning. If your five colours are 22, 21, 20, 19 and 18 percent, the image has no hierarchy of its own, and a design built from it will not either unless you impose one.

Fix a muddy palette

• Everything came back brown or grey: the image is probably low contrast or heavily filtered. Try a different crop, or a different photo.
• You got a colour that is not visibly in the picture: it is the average of an edge between two colours. Ask for more colours, or use the picker on the exact spot you meant.
• The colour you wanted is missing: pick it directly off the image. It joins the palette and everything re-measures around it.
• Too many near-neutrals: remove one or two and the percentages redistribute across what is left.

Get it out

1. Click any swatch to copy its hex on its own.
2. Copy palette takes all of them — as hex, as rgb(), or as CSS custom properties ready to paste into a stylesheet.
3. Download ASE to open the palette directly in Illustrator or Photoshop.
4. Download JSON if it is going into code, or CSS if it is going straight into a project.

Then edit it like a human

An extracted palette is a strong first draft, not a finished system. Reorder it into the hierarchy you want. Drop the colour that is technically present but useless. Check the contrast pairs before you commit to text on any of it. The tool is good at finding what is in the image; deciding what is worth keeping is still your job.