HexaCalc
All tools
Pick Hex color pickerColor picker from imagePalette from imageCamera color identifierScreen color picker
Create Palette generatorColor wheelComplementary colorsTriadic colorsMonochromatic schemeColor mixerBrownBlueGreenPurplePinkOrangeGrayColor matcherGradient generatorTailwind color generatorShades and tintsRandom color generatorPaint color visualizerWebsite color schemesColor mixing chart
Check Contrast checkerColor blindness simulatorColor blind testTypes of color blindnessHue test
Convert HEX to RGBRGB to HEXRGB to CMYKCMYK to RGBHEX to CMYKHEX to HSLColor converterColor temperatureColor name finder
Personal color Color analysisSkin tone chartSeasonal color quizWinterAutumnSpringLight SpringTrue SpringBright SpringLight SummerTrue SummerSoft SummerSoft AutumnTrue AutumnDeep AutumnDeep WinterTrue WinterBright Winter
Color families Color codesBlueGreenSage greenMauveRedPinkPurplePastelNeutralDarkGoldGrayMint greenLight greenLight purpleLime greenPastel pinkNeonPastel greenPastel yellowPeachCrimsonCool colorsBurnt orangeOrangeGreigeBright colorsSpring colors
Hex math Hex calculatorHex to decimalDecimal to hexHex to binaryBinary to hexHex to textText to hex
More tools Minecraft color codesColor gameResistor color codeImage color changerColor by numberGrayscale image
↑ ↓ to moveEnter to openEsc to close

Complementary color finder

Type or pick a color and you get the hue directly across the wheel, calculated two ways because screens and paint disagree. The split-complementary pair and a contrast check sit right underneath.

On the RGB wheel (screens)

On the RYB wheel (paint)

Split-complementary (RGB)

Preview

Autumn sale

Two colors from opposite sides of the wheel make each other look stronger.

Shop now

Two wheels, two answers

A complementary color sits directly opposite another on a color wheel, 180° away. The catch is that there are two wheels in common use, and they put different colors opposite each other:

  • The RGB wheel uses red, green and blue light as its three primaries. It matches how screens work, and it's what most design software means by "complement".
  • The RYB wheel is the traditional painter's wheel built on red, yellow and blue. Art classes teach it, and it predicts what looks pleasing on canvas and in interiors.

The tool shows both side by side so you can choose.

ColorRGB complementRYB complement
Red #FF0000Cyan #00FFFFGreen #00FF00
Blue #0000FFYellow #FFFF00Orange #FF9500
Yellow #FFFF00Blue #0000FFViolet #BF00FF
Vermilion #D9481CSky blue #1CADD9Aqua green #1CD9B3

The classic painter's pairs (red and green, blue and orange, yellow and purple) only appear on the RYB side. On the RGB wheel, red's opposite is cyan.

How the tool computes them

Your color is converted to HSL. For the RGB wheel, 180° is added to the hue and saturation and lightness stay the same. For the RYB wheel, the hue is first mapped onto the painter's wheel through a set of anchor points (red, orange, yellow, green, blue, violet), rotated there, and mapped back. The result keeps your color's saturation and lightness, so a muted color gets a muted complement.

Split-complementary colors are the two hues 30° either side of the complement, at +150° and −150° from your color. The pair keeps most of the tension of a true complement but is easier to balance, because neither partner fights your color head on.

Using complements without the clash

Two saturated complements at equal size vibrate against each other. Red text on a green background is hard to read even when the contrast ratio looks fine. Designers handle this in a few ways:

  • Unequal amounts. Let one color dominate and use the complement as a small accent, such as a button, an icon or a link.
  • Shift lightness or saturation. Pair a strong color with a pale or dark version of its complement. The preview does this by tinting the complement toward paper for the background.
  • Separate them. Put white, black or a neutral between the two colors.

Contrast is a separate question

Being opposite on the wheel says nothing about readability. The vermilion #D9481C and its RGB complement #1CADD9 have a contrast ratio of only 1.64:1, because they're similar in lightness. Neither can carry text on the other. The tool prints the ratio for each pair. For text, use the contrast checker and aim for at least 4.5:1.

Where complementary schemes work

  • Calls to action. An orange button on a mostly blue page draws the eye.
  • Sports and brand colors, where strong recognition matters more than subtlety.
  • Interiors and fashion. Small complementary accents, like rust cushions on a teal sofa, are a reliable trick. Here the RYB wheel tends to give the more natural answer.
  • Data visualization. Two complementary hues mark opposites well, such as gains against losses or cold against hot.

The color wheel shows every harmony at once, with draggable handles. For three evenly spaced colors, try the triadic color scheme generator. To get partners plus matching neutrals for clothes or a room, use the color matcher.

FAQ

What is the complementary color of blue?

On the RGB wheel, yellow. On the painter's RYB wheel, orange. Both answers are right for their own system.

Do complementary colors cancel out?

Mixed as light (additively), RGB complements add up to white: red plus cyan light makes white. In sRGB arithmetic, an even mix of #FF0000 and #00FFFF averages to gray #808080. Mixed as paint, RYB complements make a dull brown or gray, which is why painters use a touch of the complement to tone a color down.

Why does my complement look darker than my color?

Rotating hue in HSL keeps the HSL lightness number but not the perceived brightness. Yellow-greens look much brighter than blues at the same HSL lightness. If you need the pair to feel equally bright, use the triadic tool's OKLCH balancing option or adjust by eye.