Complementary colors, opposite hues, maximum contrast.

Complementary colors sit directly opposite each other on the color wheel: red and green, orange and blue, yellow and purple. Placed side by side they make each other look more intense, because the eye's color mechanism is tuned to compare opposing signals. That opposition is why the pairing carries the strongest contrast available from two hues — stronger than any two neighboring colors can produce at the same saturation and lightness.

The classic example is the pairing the wheel makes of a base color and its opposite 180° away. Enter any color above and the generator returns that pair plus the steps between them, so you can see not just the two poles but the bridge you will actually use. In practice most designs are built from the bridge: a dominant color covering most of the surface, its complement reserved for the one element that must be found instantly — a call to action, a status badge, a chart series that has to separate from the rest.

Because the two hues fight when given equal weight, the reliable rule is asymmetry. Take one hue to a large area with low saturation, and let the complement appear at small size in full chroma. The contrast does the work; the surface area keeps the page from vibrating.

Start with the base color you already have — a brand color, a photo, a product constraint — and let the opposite hue come from the wheel rather than from taste. Then decide which of the two is the canvas. If the base is a saturated blue, its complement will be a warm orange that dominates any large area it occupies, so the orange becomes the accent and the blue carries the surfaces.

Adjust lightness before you adjust anything else. Moving the complement up in lightness turns it into a tint that can sit behind text; moving it down makes it a deep accent that reads as weight rather than noise. Saturation is the second dial: keeping both hues below full chroma usually converts a clash into the tension most interfaces are actually looking for.

Finally, verify the pair against text. Complementary schemes produce vivid midtones, and vivid midtones are where white and dark text most often fail the WCAG thresholds. Run the background and text through the contrast checker before shipping, and check the color-blindness simulations too — red-green complements in particular lose much of their opposition under deuteranopia, which is exactly the pairing where hue alone should never carry meaning.