What Are Complementary Colors? Find Any Color's Complement

The wheel, in one paragraph

The color wheel arranges hues in a circle: three primary colors (red, green, blue in light), three secondaries made by mixing primaries (cyan, magenta, yellow), and six tertiaries in between, for twelve named hues. Any two colors sitting directly opposite each other on that circle are complements. Opposite on the wheel means opposite in the color space, which is why complements produce the maximum possible contrast between two colors.

The classic pairs

In the RGB system that screens use, the primary and secondary pairs line up neatly:

• Red and cyan: #ff0000 and #00ffff.
• Green and magenta: #00ff00 and #ff00ff.
• Blue and yellow: #0000ff and #ffff00.

Art classes sometimes teach different pairs, like blue and orange or red and green. Those come from the traditional painter's wheel, which is built on pigment mixing (red, yellow, blue primaries) rather than light. Both wheels are correct inside their own system. For screens, CSS, and digital design, use the RGB pairs above.

How to compute a complement

In RGB, the complement is the color with each channel flipped to its opposite: subtract each channel from 255. Take #ff5733, which is rgb(255, 87, 51):

• Red: 255 minus 255 = 0
• Green: 255 minus 87 = 168
• Blue: 255 minus 51 = 204

The complement is rgb(0, 168, 204). Convert to hex: 0 is 00, 168 is a8 (10 times 16 plus 8), 204 is cc (12 times 16 plus 12), giving #00a8cc, a medium cyan. Our RGB to hex guide shows the conversion steps if you want to check the hand math.

In HSL, the operation is even simpler: add 180 degrees to the hue and keep saturation and lightness the same. #ff5733 is hsl(11, 100%, 60%), and 11 plus 180 is 191, so the complement is hsl(191, 100%, 60%), which is the same cyan #00a8cc. The HSL version keeps the vividness identical, which is why designers often prefer it for palette work.

Why opposites pop

The effect is partly biology. Human vision processes color in opponent channels: red versus green, and blue versus yellow. A red patch next to a cyan patch pushes both opponent channels to their extremes at once, which the visual system reads as intense contrast. Designers call the side effect simultaneous contrast: each color makes its complement look more vivid than it is alone. A gray square on a red background looks faintly cyan for the same reason.

Using complements without hurting eyes

Maximum contrast is a tool, not a decoration. Two rules keep it working for you:

• Let one color dominate. The 60-30-10 rule works well: 60 percent of the design in a neutral or the main color, 30 percent in a supporting tone, 10 percent in the complement as an accent. A cyan call-to-action button on a mostly warm page pops exactly because it is rare.
• Do not set body text on a full-strength complement. Fully saturated complements side by side create a shimmering edge called vibration that is hard to read and genuinely uncomfortable. Darken one side, lighten the other, or mute the saturation before pairing them at large sizes.

Logos, sports teams, and movie posters lean on complements constantly, because a small dose of the opposite color makes the dominant color feel richer and the whole design feel intentional.

Contrast check: complements and readability

High contrast does not automatically mean readable. Web accessibility guidelines (WCAG) measure contrast as a ratio of luminance between text and background, and a complementary pair can fail that test badly: yellow text on a blue background vibrates and strains the eye even though the hues are complementary. Before shipping a complementary pairing for text, check the contrast ratio with a WCAG checker and aim for 4.5 to 1 for body text. Use complements for accents, borders, icons, and calls to action; use dark-on-light or light-on-dark neutrals for the words themselves.

Beyond pairs: the related schemes

Complements have gentler cousins for when a straight pair is too stark. Split-complementary pairs a color with the two colors next to its complement, keeping strong contrast with less tension. Triadic uses three colors evenly spaced on the wheel, 120 degrees apart. Analogous colors sit next to each other on the wheel and create calm, harmonious schemes with no opposition at all. Each scheme is the same wheel read at a different angle.

To experiment, pick any color in the free color converter, compute its complement with the formula above, and compare the two side by side in the live preview.