How is the complementary colour calculated?

The base colour is converted to HSL and the hue is rotated 180° around the colour wheel, keeping saturation and lightness. Analogous, triadic, split-complementary and tetradic schemes rotate the hue by other standard angles.

Do my colours leave my device?

No. Every harmony is computed locally in your browser. Nothing about the colours you enter is uploaded to any server.

What is the complementary colour of blue?

Orange. Complementary colours sit opposite each other on the wheel (180° apart). A pure blue at hue 240° has a complement at hue 60°, which is yellow-orange.

When should I use a triadic vs complementary scheme?

Complementary pairs give bold, high-contrast accents. Triadic schemes (three colours 120° apart) are vibrant but more balanced, good for playful designs. Analogous schemes (±30°) are the most harmonious and low-contrast.

Are the harmony colours accurate?

Yes. The hue rotations use deterministic HSL maths and standard colour-wheel angles (180°, ±30°, 120°, etc.), so the results are reproducible and correct.

Complementary Color Finder

This tool takes any colour and finds its classic colour-wheel harmonies: the complementary, analogous, triadic, split-complementary and tetradic schemes. These are the relationships designers use to build palettes that look intentional — a bold accent, a balanced trio, or a soft set of neighbours. Enter a colour and copy any swatch’s hex.

How it works

The base colour is converted to HSL, and each harmony is generated by rotating the hue around the 360° colour wheel while keeping saturation and lightness fixed. The result is converted back to hex. The rotations are:

Scheme	Hue rotations from base
Complementary	+180°
Analogous	±30°
Triadic	+120°, +240°
Split-complementary	+150°, +210°
Tetradic	+90°, +180°, +270°

Example

Starting from a blue at hue 240°:

Complementary → 240 + 180 = hue 60° (yellow-orange)
Triadic → hue 0° (red) and hue 120° (green)
Analogous → hue 210° and 270° (neighbouring blues/violets)

So blue’s bold accent partner is orange, while its triadic partners are red and green. Click any swatch to copy its hex. Everything runs locally in your browser — nothing is uploaded.