What is Complementary Color Finder?

The Complementary Color Finder calculates the opposite color on the color wheel for any input. It also shows analogous, triadic, and split-complementary harmonies so you can build a cohesive palette.

Built on chroma-js HSL math, the tool rotates the hue wheel by fixed angles to derive six harmony schemes: complementary (180°), analogous (±30°), triadic (120° and 240°), split-complementary (150° and 210°), tetradic / square (90°, 180°, 270°), and monochromatic (lighter and darker tints of the base). Each swatch shows its HEX, RGB, and HSL values and copies any of the three formats with one click, so you can paste straight into Figma, Tailwind config, or a CSS rule.

How to use

1. Step 1 — Enter a base color in HEX (#FF6600) or RGB (255 102 0) format, or pick one with the color selector.
2. Step 2 — View the complementary color (180° opposite on the color wheel) and its color codes instantly.
3. Step 3 — Explore additional harmonies (analogous, triadic, split-complementary) and copy any swatch value.

When to use

• Sketching a brand palette around an existing primary color without dragging it through Adobe Color.
• Picking a callout button color that pops against the page background.
• Choosing chart series colors that stay readable next to each other.

Result

A brand designer enters primary orange #FF8C00 and gets complementary blue #0073FF, plus analogous warm tones #FF4400 and #FFB800 for a cohesive palette.

FAQ

What is the difference between complementary and split-complementary?

Complementary is one color directly opposite on the wheel (180°). Split-complementary picks the two colors flanking that opposite (150° and 210°). Split versions tend to read as less aggressive and are easier to use across a full UI without clashing.

Will the harmonies still work for very dark or very pale base colors?

Hue-based harmonies (complementary, analogous, triadic, split-complementary, tetradic) preserve the base saturation and lightness, so a pale base gives pale partners and a dark base gives dark partners. Monochromatic intentionally varies lightness around your hue. If a hue-based partner looks washed out, raise the base saturation before generating.

Does it follow the artist's wheel (RYB) or the screen wheel (RGB)?

Screen wheel. The opposite of red (#FF0000) here is cyan (#00FFFF), not green like in oil-paint theory. For digital work this is the correct model; for physical paint mixing it will feel off.

Why do some bases produce a complement that looks too similar to the base?

Pure grayscale inputs have an undefined hue, so the rotation has nothing to spin around and you get the same gray back. Add even 5% saturation to the base and the complementary will swing out properly.

Can I export the whole palette at once?

Yes — four ways. Download Palette saves every swatch and its HEX into a plain-text file. Download CSS exports the palette as ready-to-use CSS custom properties (e.g. --color-complementary-1: #0099FF;). Tailwind config writes a paste-ready colors object for tailwind.config.js. PNG image saves the whole palette as a labelled picture for design reviews.

Related Tools