Palettes

How to Build a Colour Palette From a Photo

Pulling colours from an image is easy to do and easy to do badly. Here is how extraction actually works, and how to turn six raw swatches into a usable palette.

Extracting a palette from a photo works, and it is genuinely useful — but the raw output is a starting point, not a finished palette. Understanding what the extraction actually does is what lets you fix the cases where it disappoints.

What extraction really does

The process is simpler than it looks:

  1. Scale the image down — to around 90 pixels wide. Detail is irrelevant when you only want dominant colours, and a smaller image is far faster to process.
  2. Group similar pixels into buckets, so thousands of nearly-identical sky-blues collapse into one entry.
  3. Rank buckets by size and pick the largest, skipping any too close to one already chosen so you get variety instead of six shades of the same blue.

The critical word is area. Extraction finds the colours that cover the most of the image — not the ones that catch your eye.

Why your favourite colour is often missing

This is the thing that frustrates people, and it is not a bug.

In a photo of a grey street with one red door, the red is the colour you remember. But it might be two percent of the pixels. The extractor, ranking by area, fills your palette with greys and browns and treats the red as noise.

The colours that dominate a photo are usually the backdrop — sky, foliage, walls, skin. The striking accent is almost always a small, bright region that never wins on area. So the palette you get is the photo’s mood, not its highlights.

If you want the accent, crop to it before extracting, or pick it out by eye afterwards. No area-based method will surface it for you.

Why the swatches look muted

Each swatch is an average of its bucket, and averaging always pulls toward the middle.

A patch of sky that ranges from pale near the horizon to deep overhead averages to a flat mid-blue that appears nowhere in the actual photo. Multiply that across every bucket and the whole palette comes out gentler and greyer than the image felt.

This is usually fine — muted palettes are easy to design with — but if you want the punch of the original, take an extracted colour into a shades tool and pick a more saturated step near it.

Turning six swatches into a palette

Raw extraction gives you colours that coexist because they came from one image. It does not give you roles. To make it usable:

  • Sort by lightness, not by the order they came out. Now you can see your darks, mids and lights.
  • Pick a dominant — usually the largest area — and one accent, the most saturated of the set. Let the rest support.
  • Check contrast between whatever you will use for text and whatever sits behind it. Photo-derived colours are frequently mid-toned and fail against each other, so you will often need a near-black or near-white that was not in the photo at all.
  • Cut ruthlessly. Six extracted colours rarely make six good palette colours. Three or four with clear jobs beats six that merely came from the same picture.

Everything stays on your device

Worth stating plainly, because it is a real advantage: extraction runs entirely in your browser using a canvas. The image is read locally and never uploaded, stored or sent anywhere. You can pull colours from a private photo, a client’s unreleased artwork or a screenshot without any of it leaving your machine.

Try it

Image to palette

Extract colours from a photo

Common questions

How do you extract colours from an image?

Software scales the image down, groups similar pixels into buckets, and picks the most common buckets that are different enough from each other. The result is the image's dominant colours by area.

Why do extracted colours look duller than the photo?

Each swatch is the average of a group of pixels, and averaging pulls toward the middle. The photo's most striking colour is often a small bright highlight that never dominates a group.

How many colours should I pull from a photo?

Five or six as a maximum. Beyond that you are extracting near-duplicates, and a palette needs a small, deliberate set to be useful.