Colour Palette

How a palette gets extracted

Pulling colours from a photograph is a clustering problem. A photo contains tens of thousands of distinct colour values, and extraction groups them into a handful of representative clusters — usually with an algorithm like k-means — then returns each cluster's centre.

That is why an extracted palette is not simply the most common pixels. A large area of near-identical sky would dominate a naive count; clustering instead returns colours that represent the range of the image, which is what makes the result useful.

Dominant is not the same as useful

The most-present colour in an image is frequently the least interesting one — the wall, the sky, the tablecloth. A palette built only from area gives you five shades of beige.

In practice, a usable palette needs contrast and range: a dark, a light, a saturated accent and one or two mid-tones. When picking from an extracted set, choose for that spread rather than taking the top five by frequency.

Hex, RGB and HSL

The same colour has several notations, and which one you want depends on the job:

• Hex (#4F46E5) — the web default, and what most design tools expect.
• RGB (79, 70, 229) — identical information, easier to manipulate in code.
• HSL (243°, 75%, 59%) — hue, saturation and lightness separately, which is what you want when building tints and shades of one colour.

Check contrast before you commit

A palette pulled from a photograph is chosen for how the colours look together, not for whether text is readable on them, and those are different questions.

If any of these colours will carry text, check the contrast ratio: 4.5:1 against its background for body text, 3:1 for large text, to meet WCAG AA. Mid-tone colours are the usual failure — they look pleasant and fail against both white and black.