Complementary colors

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel, 180 degrees apart. Side by side they make each other look more vivid, which is why they are used for contrast, emphasis and calls to action. Mixed together as paint, they cancel into brown or gray.

Each color of a complementary pair contains what the other lacks. In light, a color plus its complement adds up to white; in paint, the two absorb nearly all light between them and make a dark neutral. Your eyes also create complements on their own: stare at a red square and then at white paper, and you see a green afterimage.

Which color wheel?

The answer depends on the wheel. On the traditional painter’s RYB wheel the pairs are red and green, orange and blue, yellow and purple. On the RGB wheel used by screens they are red and cyan, green and magenta, blue and yellow. The examples below use OKLCH, a perceptual version of the digital wheel.

The complementary color of every common color

Look up a color for its complement. The painter’s answer comes from the traditional red-yellow-blue wheel used in art classes; the screen answer is the RGB inverse (each channel subtracted from 255), the opposite on the light-based wheel screens use, with a hex code you can use straight away.

Complementary colors examples

How to use complementary colors

• Use one color as the main color and its complement as an accent, for buttons, links and highlights.
• Desaturate or lighten one of the pair so the two do not fight at full strength.
• Avoid setting small text in one complement on a background of the other: the edges appear to vibrate.
• Check contrast: complements can be opposite in hue but close in lightness, which fails WCAG.

In interface design, a complementary palette usually becomes a set of roles rather than equal colors: one color for primary actions, one for supporting surfaces or illustrations, and neutrals for text and backgrounds. Generate a full tint and shade scale for each hue so you have light backgrounds, borders and accessible text in the same family.

Every palette here opens in the palette generator, where you can lock colors, adjust them in OKLCH and check contrast before exporting to CSS, Tailwind or Figma.

Other color harmonies

• Analogous colorsAnalogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example.
• Triadic colorsA triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle.
• Split-complementary colorsA split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away.
• Monochromatic colorsA monochromatic color scheme uses a single hue in several lightness and saturation levels: tints (with white), shades (with black) and tones (with gray).

Frequently asked questions