Find Complementary Colors From HEX Code

How the Opposite Color Is Worked Out

Every color has a hue, which is its angle on a 360 degree color circle. The opposite color sits 180 degrees away, straight across the circle, with the same saturation and lightness.

You can work it out by hand from a HEX code. Add the highest and lowest of the red, green, and blue values, then subtract each value from that total. Here it is for #2C36B9, where 185 + 44 = 229:

Step	Red	Green	Blue
#2C36B9 as numbers	44	54	185
229 minus each	185	175	44
Back to HEX	B9	AF	2C

That gives #B9AF2C. The tool uses this same math, so its answer always matches what you get by hand.

Screen Colors vs Paint Colors

Screens build every color from tiny red, green, and blue lights, so blue sits across from yellow and red sits across from cyan. Painters use the older red, yellow, and blue wheel, where blue pairs with orange and red pairs with green.

Pick Screen (RGB) for websites, apps, and anything people see on a display. Switch to Paint (RYB) when you are mixing paint, planning a craft, or want the pairs taught in art class.

Tips for Designing With Opposites

Opposite colors make each other look more intense when they sit side by side. That is why they work so well for buttons, sale badges, and links that need to pop.

Let one color fill most of the space and save its opposite for small accents. Two strong opposites in equal amounts tend to fight for attention.

A big jump in hue does not always mean readable text. WCAG asks for a ratio of at least 4.5:1 for normal text and 3:1 for large text, so check the contrast panel before you set words in either color.

When to Use Each Scheme

• Split complementary: strong contrast that is easier to balance than a straight opposite.
• Analogous: calm, natural sets for backgrounds and illustrations.
• Triadic: bright and playful. Let one color lead and use the other two as accents.
• Square: four clearly different hues for charts, tags, and categories.
• Tints and shades: borders, hover states, and backgrounds that stay on brand.

You can find more free calculators in our full tool collection.