How to Build a Colour Palette from a Photo
A photograph can hold exactly the colours you want for a room, a poster or a website, but getting them out is awkward. An eyedropper gives you one pixel at a time, and the pixel you pick is rarely the colour you actually saw. What you need is the handful of colours that carry the image, plus some idea of how they behave next to each other.
The Colour Palette Generator pulls those colours out of an image and shows the contrast of each pair, so you can tell which combinations are readable before you commit to them.
Quick answer
Load the photo, let the tool extract its dominant colours, then choose four to six swatches and note their hex values. Check the contrast figures for the pairs you plan to use as text and background, and adjust lightness rather than hue when a pair fails. The extraction happens in your browser.
Start with a photo that has something to say
A palette is only as useful as the image it comes from. Photos with a clear dominant hue and a range of light and dark areas give the most workable results: a landscape at dusk, a painted wall, a piece of fabric. Photos with a strong filter applied, heavy grain or a single flat colour give you a palette that is technically accurate but hard to use.
If the file is large, compress it first with the Image Compressor. A smaller file loads faster and the colour values are effectively unchanged. Avoid screenshots of photos, which add compression artefacts that show up as muddy swatches.
Give each colour a job
Extracted swatches arrive as a set of equals. A usable palette needs roles:
- Base — the largest area, usually the lightest or darkest colour.
- Text — a colour with enough contrast against the base to read comfortably.
- Accent — one strong colour for buttons, links or highlights.
- Support — one or two muted colours for borders, backgrounds and secondary text.
Photographs tend to produce several mid-tones that sit close together. Pick one of them as support and push the others aside; a palette with four near-identical blues will look flat.
Read the contrast numbers instead of guessing
Contrast is measured as a ratio between the relative luminance of two colours. For body text, the usual target is 4.5:1; for large text and interface shapes, 3:1. The tool works these out for each pair, which turns a vague sense of “that looks a bit weak” into a decision.
When a pair fails, keep the hue and change the lightness. A mid-blue that fails against white can become a deep navy without losing its character. If you need the exact value of a single point in the image — a logo colour, say — the image colour picker reads individual pixels.
Test the palette at the size it will be used
A swatch grid flatters colours. Put the palette into the actual context: a heading at 14px, a button with a label, a table with alternating rows. Contrast that passes in a large block can fail in small type, and a colour that looks rich on screen can print dull. Note the hex values, keep the source photo, and adjust one variable at a time.
Open the Colour Palette Generator with your chosen photo, extract the swatches and copy the hex values into your project. Check the contrast pairs before you build anything around them.
Common questions
How many colours should I take from a photo for a palette?
Aim for four to six swatches. Give each colour a job: a base for the largest area, a text colour with enough contrast, one accent for buttons or links, and one or two muted support colours. Photographs often produce several similar mid-tones, so keep one as support and set the rest aside.
What contrast ratio do I need for text?
For body text, aim for 4.5:1. For large text and interface shapes, 3:1 is the usual target. The generator calculates these ratios for each pair, so a vague sense that a combination looks weak becomes a clear decision. If a pair fails, keep the hue and change the lightness instead.
Does the photo get uploaded when I extract colours?
No. The extraction happens in your browser, so the photo is not uploaded to a server. You can compress a large image first to make it load faster; the colour values are effectively unchanged. Avoid screenshots of photos, because compression artefacts can show up as muddy swatches.