Colour Harmony: Complementary, Analogous, and Triadic Palettes

Colour harmony is a way of choosing colours that relate to each other on the colour wheel. The three common relationships are complementary, analogous, and triadic. Each produces a different feel and its own problems, and none guarantees a readable or pleasant result.

The Colour Palette Generator runs in the browser and can pull a palette from a photo or build one from a base colour. The relationships below help you decide which palette to ask for and how to use it.

Complementary: contrast with a job

Opposite colours, such as blue and orange, sit at the two ends of a diameter. The pairing is lively because the eye is pulled in two directions at once. That suits a call to action, a sports team, or a poster seen from a distance.

The risk is equal amounts: two saturated opposites in the same proportion can vibrate and make text hard to read. Give one colour most of the space, use the other for a small accent, and let a neutral carry the background. A complementary pair can still fail a contrast check; harmony describes the relationship, not readability.

Analogous: calm, but watch the contrast

Analogous colours sit next to each other on the wheel, such as blue, blue-green, and green. The result feels calm and cohesive because no colour contradicts another. It suits backgrounds, editorial layouts, and restrained brands.

The danger is sameness: if every colour has a similar lightness, buttons and headings disappear into the page. Vary the value as well as the hue: a deep navy, a mid blue, and a pale sky can be analogous and still distinct. Keep one accent outside the family if you need a clear action colour.

Triadic: balance and restraint

A triadic palette takes three colours spaced evenly around the wheel, such as red, yellow, and blue. It is vivid in theory, but three strong colours compete for attention. Choose one as the dominant colour, use the second for support, and keep the third for a small accent.

Neutrals do the settling: a white, off-white, grey, or near-black background gives the three hues room without turning the page into a fairground. If it still feels noisy, reduce the saturation of two colours rather than adding a fourth.

Turn the harmony into a usable palette

Assign roles before you pick shades: background, body text, heading, primary action, and perhaps one accent. Then check the text and background pairs for contrast, including the hover and focus states. A palette that looks balanced as swatches can fail when used for small text.

Test the palette in greyscale, too. If two colours that carry different meanings become the same grey, the design is relying on hue alone. Add a label, an icon, or a difference in lightness. When a set works, save the hex values and use them consistently.

Start from a photo or a base colour in the Colour Palette Generator, then apply the harmony that suits the job. For the wider method, read How to Build a Colour Palette from a Photo. Before you ship the palette, check the text pairs with the guidance in How to Check Colour Contrast for Accessible Text.