How to choose a colour palette that works

Start with one colour that carries the meaning, whether a brand colour, a mood or something taken from a photo. Build the rest around it with a colour-harmony rule such as complementary, analogous or triadic, add neutrals for backgrounds and text, and let one colour clearly dominate while the others support it. Then test the palette with real text for contrast. The colour palette extractor I built is one way in: it pulls the main colours out of any picture as hex codes.

Start from one colour

Palettes are easier to build than to invent. Most good ones start from a single anchor: an existing logo colour, a photograph whose mood you want, or a colour with the right associations for the subject. If the starting point is an image, the palette extractor shrinks it, groups its pixels with a median-cut algorithm and returns eight representative colours from darkest to lightest, each one click to copy. When you need one exact pixel rather than an overall impression, the image colour picker gives its hex, RGB and HSL values. Hex colour codes, explained covers how those codes work.

Colour harmony on the wheel

Colour harmony rules describe positions on a colour wheel that tend to look good together:

• Complementary: two colours opposite each other, such as blue and orange. Maximum contrast and energy; usually one dominates and the other is the accent.
• Analogous: neighbours on the wheel, such as blue, teal and green. Calm and cohesive, but low in contrast, so it needs a neutral for text.
• Triadic: three colours evenly spaced, 120 degrees apart. Lively and playful, and hard to balance unless one colour leads.
• Split-complementary: a base colour plus the two neighbours of its complement, softer than a straight complementary pair.
• Monochromatic: one hue at different lightness and saturation, the safest choice for interfaces.

Which wheel you use matters. The painter's red-yellow-blue wheel puts green opposite red, while the RGB-based hue wheel used by screens and design software puts cyan there. The colour scheme generator works on the screen wheel: pick one colour and it gives complementary, analogous, triadic, split, tetradic and monochrome schemes with hex codes, contrast ratios and CSS variables.

The 60-30-10 rule of thumb

The 60-30-10 rule comes from interior design: roughly 60 percent of a space in a dominant colour, 30 percent in a secondary colour and 10 percent in an accent. It is a rule of thumb, not a law or a research finding, and its real value is forcing a hierarchy so no two colours fight for attention. On a website the 60 is often a neutral background, the 30 the brand colour in headers and panels, and the 10 the accent reserved for buttons, links and highlights. Keeping the accent rare is what makes it work: if everything is highlighted, nothing is.

Neutrals, tints and shades

Most interfaces are mostly neutral: white or off-white, a few greys and a near-black for text. Neutrals tinted very slightly towards your main hue look more intentional than pure grey. Each main colour also needs a range: a pale tint for backgrounds, the full colour for buttons, and a darker shade for text and hover states. The Tailwind colour generator builds a full 50 to 950 scale from one colour. Avoid fully saturated colours over large areas; they are tiring to look at and make text on top hard to read.

Test for contrast and colour blindness

A palette is only finished once it has been tested with text. Body text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG level AA, which many pleasant pastel combinations fail; the contrast checker gives the ratio and suggests the nearest passing shade, and WCAG contrast ratio explained: AA, AAA and the formula explains the numbers. Colour vision deficiency is common, with red-green the most frequent kind, so never let colour alone carry meaning: pair red and green status colours with icons or labels, and preview designs in the colour-blindness simulator. Finally, look at the palette on a real page, in both light and dark mode if you support them, on more than one screen.