Complementary
Two hues sitting straight across the color wheel from each other. Maximum tension, maximum pop: orange and blue, red and green.
See it
What it is
Complementary colors sit roughly 180 degrees apart on the wheel. Each one makes the other look more intense, an effect called simultaneous contrast, which is why the pairing shows up everywhere attention is the goal: blockbuster teal-and-orange grading, sports kits, the yellow against blue in Van Gogh's 'Cafe Terrace at Night', a red 'Buy' button on a green dashboard.
Reach for it when you want exactly one thing to shout. The rule that makes it work is unequal area: something like 90% of one hue as the quiet dominant and 10% of its opposite reserved for buttons, links, and highlights. Split a complementary pair 50/50 and the design stops reading as a design and starts reading as a warning sign.
Gotcha: at equal lightness and full chroma, complementary edges shimmer, and complementary text on a complementary background is genuinely hard to read even when the contrast ratio passes. Fix it by desaturating one side, pulling them apart in lightness, or slipping a neutral between them. Also check which wheel you mean: red's opposite is green on the artist RYB wheel but cyan on the RGB wheel your code does math on.
Ask AI for it
Use a complementary color scheme: take the current primary color as the base, convert it to HSL, call its hue H, and pair it with H plus 180 degrees on that same RGB/HSL wheel. Weight them unevenly, about 90% dominant (low chroma, used for backgrounds and large surfaces) and 10% complement (full chroma, used only for buttons, links, and highlights). Separate the pair by at least 30 OKLCH lightness points so their edges do not shimmer, and never put complementary text directly on a complementary background: buffer it with a neutral. Return hex and OKLCH for both, and label which is dominant and which is accent.