How designers choose colours from photography

Photographs are the most common source of colour palettes and the least reliable, for the same reason: they contain colours nobody chose. That is what makes them feel natural, and what makes them hard to use straight.

You are looking at light, not paint

The colour of an object in a photograph is the colour of the object multiplied by the colour of the light on it, then adjusted by whatever white balance the camera picked. A white wall at sunset is orange. A white wall in shade is blue. Neither of those is the wall.

This matters when you are matching something real — a product, a fabric, a painted room. Pull the palette, then check it against the thing itself if you can. When you cannot, prefer photographs shot in even, neutral light over the ones that look most beautiful.

The palette is already a hierarchy

Photographs distribute colour the way designs need to: a lot of one thing, some of another, a little of a third. Use those proportions rather than flattening them.

• The dominant colour, 30% and up, is a ground — a page background or a large surface.
• The second and third are supporting surfaces, borders and secondary text.
• Anything under about 8% is an accent. It works because it is rare. Using it for a page background is how a palette that looked good becomes a design that does not.

A palette is a set of proportions as much as a set of colours.

Take the neutrals seriously

The most valuable thing in a photographic palette is often not the colourful bit. It is the warm off-white and the near-black that came with it — neutrals that already agree with the accents because they were lit by the same light. They are much better than #FFFFFF and #000000, and much harder to invent from scratch.

Adjust deliberately

Photographic colours are often too desaturated for interface work, where they have to hold up at small sizes against a bright screen. Push saturation up and lightness down for anything that has to carry text, and keep the original as your reference. The variations panel does exactly this — lighter, darker, muted, more saturated — and it is a starting point, not an answer.

Check before you commit

Nothing about a photograph guarantees its colours can sit next to each other in text. Run the contrast pairs before the palette goes into a design file, not after a stakeholder asks why the caption is unreadable.