Extracting colours from an image is one of the fastest ways to arrive at a palette that feels coherent, because the coherence is already there — a photograph taken under one light source has a colour relationship built into it that is very hard to invent from scratch.
Your image is read entirely inside your browser. It is not uploaded, not stored, and never sent anywhere; see the privacy policy for the detail.
How extraction works
The image is drawn to a canvas, downsampled for speed, and its pixels are grouped into clusters of similar colour. Each cluster’s representative becomes one swatch, and the clusters are ranked by how much of the image they cover. The result approximates “the colours a person would say this photo is made of”.
Two things follow from that. First, the output is dominated by area, not by importance — a photo that is 70% sky returns a lot of blue regardless of what the subject is. Second, the swatches are averages, so a cluster spanning a highlight and a shadow returns something that appears in neither.
Turning swatches into a usable palette
Extracted colours are raw material, not a finished palette. What comes out is typically five or six mid-tone, moderately saturated colours — pleasant together, and unusable directly as an interface palette, because interfaces need extremes: something near-white for backgrounds and something near-black for text.
A workable process:
- Pick one swatch as your primary. Usually not the most dominant one — the dominant colour is often a background, and you want the accent.
- Build its family. Run it through shades and tints or the colour scale generator to get the light and dark steps the original image never contained.
- Derive neutrals from the image. Take the least saturated swatch and pull almost all the remaining chroma out of it. Greys that carry a trace of the image’s hue feel connected in a way pure grey does not.
- Check every text pair. Extracted colours frequently cluster in the mid-tones, which is exactly the range that fails contrast. Run the pairs through the contrast checker before committing.
Choosing a good source image
- Strong, simple colour stories extract better than busy ones. A photograph with three clear colour areas gives a more usable palette than a crowded street scene.
- Beware colour casts. An image shot under warm indoor light tints everything orange, and the extraction faithfully reproduces the cast rather than the colours of the objects.
- Watch the exposure. Blown highlights extract as pure white and crushed shadows as pure black, neither of which tells you anything.
- Check the licence. Extracting colours from an image you do not own is fine — colour values are facts and not copyrightable — but that says nothing about your right to use the image itself.
Where people go wrong
Using all six swatches. A palette of six equally weighted colours has no hierarchy. Pick one primary, one accent, and let the rest inform your neutrals.
Expecting the palette to look like the photo. A photograph carries texture, gradient and light. Flat swatches of the same colours often look surprisingly drab — the missing ingredient is variation, not hue.
Skipping the accessibility step. This is the most common failure. Beautiful extracted palettes fail contrast constantly, because photographs have no reason to contain a 4.5:1 pair.
Our guide on building a palette from a photo walks through a full example, and palette by mood is the alternative route when you have a feeling in mind rather than an image.