About the Complementary Colour Finder
This complementary colour finder takes one base colour and rotates its hue around the colour wheel to build five classical harmonies: complementary at 180 degrees, analogous at plus and minus 30, split complementary at 150 and 210, triadic at even 120-degree intervals, and tetradic at 90-degree intervals. Saturation and lightness stay fixed throughout, so every colour in the result carries the same visual weight as the one you started with. Each harmony arrives as labelled swatches with the exact rotation applied, plus a CSS custom property block ready to paste.
How to use the Complementary Colour Finder
- 1
Choose a Base colour with the colour field.
- 2
Select a Harmony — Complementary, Analogous, Split complementary, Triadic or Tetradic.
- 3
Read the swatch strip, where each colour is labelled with the hue rotation applied to it.
- 4
Copy the CSS variables block containing every colour in the scheme.
What people use it for
Picking an accent for a brand colour
The complement gives the loudest possible accent, which is why call-to-action buttons so often sit opposite the primary brand hue on the wheel.
Colouring a multi-series chart
Triadic and tetradic schemes space hues evenly, which is exactly what a chart legend needs so that adjacent series stay distinguishable.
Designing a calm, cohesive section
An analogous scheme keeps every hue within 60 degrees, producing the low-contrast, restful feel that long-form reading layouts benefit from.
Softening a clash
When a straight complement feels aggressive, split complementary keeps most of the contrast while removing the vibrating edge two exact opposites produce.
Where the harmony rules come from
The colour wheel dates to Isaac Newton, who in 1704 bent the linear spectrum into a circle by joining red to violet, capturing the fact that our perception of hue is genuinely cyclical even though wavelength is not. Goethe, Chevreul and later Johannes Itten at the Bauhaus built the harmony rules on that circle, defining complementary, triadic and tetradic relationships as fixed angular intervals. Chevreul's contribution matters most in practice: while directing dyeing at the Gobelins tapestry works he demonstrated simultaneous contrast, showing that a colour's appearance shifts depending on what surrounds it, and that complementary neighbours intensify each other. Modern colour science has complicated all this — the artists' wheel puts red opposite green, while the additive RGB wheel that screens actually use puts red opposite cyan — so treat the angles as a well-tested starting point rather than as law. HSL, which this tool uses, follows the additive wheel, so its complement of red is cyan rather than the green a painter would name.
Using a harmony without it looking loud
The most common mistake with a generated scheme is deploying every colour at equal strength and full saturation, which produces something that reads as a warning sign rather than a design. The reliable convention is the 60-30-10 split: roughly 60 percent of the visible area in a dominant colour, usually a heavily desaturated or very light version of the base, 30 percent in a secondary, and only 10 percent in the accent. Applied to an interface, that means the complement typically appears on nothing more than the primary button, a link and an active state. Vary lightness and saturation as freely as hue — a pale tint and a deep shade of the same two hues will do more work than two vivid mid-tones ever can. Two further cautions. Exact complements at full saturation and equal lightness produce a shimmering edge where they meet, a genuine optical artefact best avoided by shifting one colour's lightness. And a hue relationship guarantees nothing about legibility, so every text and background pairing still needs a contrast check.
Tips
- Let one colour dominate and use the others sparingly; an even split between four hues rarely works.
- Desaturate the supporting colours in a harmony so the accent keeps its impact.
- Never place two fully saturated complements directly adjacent as large blocks — offset their lightness to stop the edge vibrating.