Find the colours that were already there

Most colour schemes fail for the same reason: they are chosen in isolation. A brand colour is picked from a mood board, then a background, then a text colour, and the three never spend a moment in the same picture. Photographs do not have this problem. A landscape at dusk is a palette that has already survived the light, the atmosphere and the eye of the person who took it, which is why extracting colour from an image is a better starting point than inventing it.

The extraction itself is a clustering problem. Every pixel of a picture is a point in a three-dimensional space of red, green and blue. The task is to place a small number of representative points — five, six, eight — so that every pixel is close to one of them. K-means does this by iteration: choose starting points, assign each pixel to the nearest, move each point to the average of its cluster, repeat. After a few rounds the points stop moving and the palette exists.

Why the distance calculation is not plain RGB

A naive implementation averages red, green and blue equally, which does not match human vision. The eye is most sensitive to green, then red, and least to blue, so the distance formula weights them roughly 0.3, 0.59 and 0.11. Without those weights, greens drift toward brown and skin tones toward grey, and the palette looks muddier than the photograph.

The other trick is sampling. Two hundred thousand pixels carry no more information about the palette than three thousand do, and k-means cost grows with the number of points. Shrinking the image and stepping through it produces the same result in a fraction of the time.

From palette to interface

A scheme needs three roles before it needs ten colours. The background is the quietest value — the darkest swatch for a dark interface, the lightest for a light one. The text colour sits at least two brightness steps away from it, and the contrast ratio between them should reach 4.5 to 1 for body text; anything less is unreadable in daylight on a phone. The accent is the most saturated colour of the set, reserved for buttons, links and one or two highlights.

The remaining colours do the supporting work: borders, hover states, chart series, illustration fills. A palette of six usually resolves into two backgrounds (page and card), two text values (primary and secondary) and two accents. That is a complete interface, and it came from a single photograph.

Practical rules that save you later

• Extract from the part of the picture you actually like — crop out that distracting foreground first.
• Trust the order: the largest group is usually a background, not an accent.
• Never use two accents of similar saturation next to each other; the eye cannot tell which one is the action.
• Test the palette on a screenshot, not on a swatch page. Colours behave differently when they hold text.

Finally, keep the source. Write the hex codes into your stylesheet as named variables and note which photograph they came from. Six months later, when you need a seventh colour, you can go back to the same picture and extend the scheme instead of guessing at a new one.

Contrast is the part a palette cannot fix by itself

A pair of colours that looks lovely on a swatch page can be unreadable as text. Contrast is a ratio between the relative luminance of two colours, and the guideline for body text is 4.5 to 1; large headings can go down to 3 to 1. The practical consequence is simple: whatever the photograph gives you, the text colour is usually not one of its saturated tones but a near-black or near-white derived from the background.

That is why a palette of six works better as two backgrounds, two text values and two accents than as six equally weighted colours. When a brand insists on coloured text, keep it for short labels and put the paragraphs in the neutral value.

Keeping a palette alive

Colours drift. A new image on the home page, a seasonal banner, one designer's monitor calibrated differently, and within a year the site has nine greens. The defence is boring and effective: name the variables in the stylesheet, forbid raw hex codes in components, and review the palette twice a year against a single reference image. A palette that is documented survives; one that lives in a mood board does not.

It is also worth recording the source photograph and the extraction settings next to the variables. When the next person needs a colour for a hover state, they can reproduce the same palette in a minute instead of inventing a tenth green.