Complementary Color Finder: Get the Opposite Color from a Hex Code

Enter any hex color to get its complement, the color directly opposite on the color wheel. Switch the Harmony menu for analogous, split complementary, triadic or tetradic schemes.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Harmony

Base

+180deg

Complementary colour

#dde548

Values

Base HEX: #4f46e5
Base hue: 243deg
Complement HEX: #dde548
Colours in harmony: 2

CSS variables

:root {
  --harmony-1: #5048e5;
  --harmony-2: #dde548;
}

Quick answers

How do I find the complementary color of a hex code?: Enter the hex code as the Base colour and read Complement HEX. The tool converts the color to HSL, adds 180 degrees to the hue and converts back. For #2563eb, hue 221 becomes hue 41, which gives #ebac24.
What is the complementary color of blue?: On the RGB color wheel the opposite of pure blue #0000ff is yellow #ffff00. A deeper navy #000080 pairs with olive #808000, and a typical web blue such as #2563eb pairs with amber #ebac24. On the traditional painter's wheel, blue's complement is orange.
What is the complementary color of red?: On the RGB wheel used for screens, the opposite of red #ff0000 is cyan #00ffff. Maroon #800000 pairs with teal #008080. In traditional red-yellow-blue color theory, used for paint, the complement of red is green.
What is the opposite of green on the color wheel?: Magenta. Pure green #00ff00 is opposite #ff00ff, and the darker web green #008000 is opposite purple #800080. The painter's wheel gives red as the complement of green.
What is the complementary color of yellow?: Blue. Pure yellow #ffff00 is opposite pure blue #0000ff on the RGB wheel, and gold #ffd700 is opposite the strong blue #0026ff. The painter's wheel puts purple opposite yellow.
Are complementary and opposite colors the same thing?: Yes. Complementary colors are the two colors directly opposite each other on a color wheel, 180 degrees apart in hue. Which color that is depends on the wheel: the RGB wheel for screens and the red-yellow-blue wheel for paint give different opposites.
Is it complementary or complimentary colors?: Complementary, with an e. The word comes from complement, meaning something that completes. Complimentary with an i means free of charge or expressing praise. Both spellings are typed into search boxes, but only the first is the color theory term.

How Complementary Colour Finder works

This complementary color finder takes a hex code, reads its hue and returns the color 180 degrees away on the color wheel with the same saturation and lightness. The complement of the default indigo #4f46e5 is the yellow-green #dde548, and the complement of blue #2563eb is the amber #ebac24. The same hue rotation builds four other schemes: analogous (30 degrees either side), split complementary (150 and 210 degrees), triadic (120 and 240 degrees) and tetradic (90, 180 and 270 degrees). Each scheme is shown as swatches labeled with their hue rotation and as CSS variables with the hex codes. The wheel used is the RGB wheel that screens work on, so red's opposite is cyan, not the green of a painter's wheel.

Complementary colors chart with hex codes

Each complement is the tool's output for the base hex code. Base hue is the hue angle in degrees.

Base color	Base hex	Base hue	Complement hex	Complement looks like
Red	#ff0000	0	#00ffff	Cyan
Orange	#ff8000	30	#0080ff	Azure blue
Gold	#ffd700	51	#0026ff	Strong blue
Yellow	#ffff00	60	#0000ff	Blue
Lime green	#00ff00	120	#ff00ff	Magenta
Green	#008000	120	#800080	Purple
Cyan	#00ffff	180	#ff0000	Red
Teal	#008080	180	#800000	Maroon
Blue	#0000ff	240	#ffff00	Yellow
Navy	#000080	240	#808000	Olive
Indigo	#4f46e5	243	#dde548	Yellow-green
Purple	#800080	300	#008000	Green
Magenta	#ff00ff	300	#00ff00	Lime green
Pink	#ffc0cb	350	#c2fff5	Pale mint

The complement keeps the saturation and lightness of the base, so a dark base gives a dark complement and a pastel gives a pastel.

The five color harmonies and their hue angles

Example output for Base colour #2563eb (hue 221 degrees).

Harmony	Hue rotations	Colors	Result for #2563eb
Complementary	0, +180	2	#2463eb, #ebac24
Analogous	-30, 0, +30	3	#24c6eb, #2463eb, #4824eb
Split complementary	0, +150, +210	3	#2463eb, #eb4824, #c6eb24
Triadic	0, +120, +240	3	#2463eb, #eb2463, #63eb24
Tetradic	0, +90, +180, +270	4	#2463eb, #eb24c6, #ebac24, #24eb48

The Base swatch reads #2463eb, one digit away from the #2563eb entered. See the rounding note below. The analogous swatch at -30 degrees is labeled +330deg.

How to calculate a complementary color by hand

complement channel = (highest channel + lowest channel) - channel

Rotating the hue by 180 degrees while keeping saturation and lightness is the same as subtracting each of the red, green and blue values from the sum of the largest and smallest of the three. Take #40bf77, which is rgb(64, 191, 119). The highest value is 191 and the lowest is 64, which add up to 255. Red becomes 255 - 64 = 191, green becomes 255 - 191 = 64 and blue becomes 255 - 119 = 136, giving rgb(191, 64, 136) or #bf4088, the same answer the tool gives. This is not the same as inverting a color, which subtracts every value from 255 and also flips light to dark. The two methods agree only when the highest and lowest values add up to 255. For navy #000080, inverting gives the pale yellow #ffff7f, while the true complement is olive #808000, equally dark.

RGB wheel or painter's wheel: why red's opposite is cyan here

There is more than one color wheel. The traditional artist's wheel is built on red, yellow and blue as primaries and gives the familiar pairs red and green, blue and orange, yellow and purple. It dates from the 18th and 19th centuries and describes mixing paint reasonably well.

Screens mix red, green and blue light, and the hue angle in HSL and in CSS follows that RGB wheel: red at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Opposites on this wheel are red and cyan, green and magenta, blue and yellow. These are true complements in the physical sense: each pair added together as light makes white or gray.

This tool uses the RGB wheel only. If you want the painter's pairing for a design, treat the result as a starting point. An orange next to a blue, or a green next to a red, can be found by picking the complement here and then nudging its hue by 30 to 60 degrees. The Split complementary option shows the two hues 30 degrees either side of the complement, which is often close to the painter's choice.

Limits and rounding to know about

Black, white and grays have no hue, so they have no complement. Enter #000000, #ffffff or #808080 and the tool returns the same color back.
The tool rounds hue, saturation and lightness to whole numbers before rotating. The Base swatch and the complement can therefore differ from an exact calculation by one step per channel: #ffa500 is shown as #ffa600, and #2563eb as #2463eb. The Base HEX row in the Values panel always shows the code you entered.
Saturation and lightness are never adjusted. A complement can look brighter or heavier than its base even at the same lightness value, because the eye sees yellow as lighter than blue.
A complementary pair is high in hue contrast, not necessarily in text contrast. Check any text and background pair with a contrast checker.
There is no monochromatic option and no way to set a custom angle. For lighter and darker versions of one hue, use a shades generator.

Putting a scheme to work

Accent color for a blue brand

Base colour #2563eb, Harmony Complementary

Complement HEX #ebac24, an amber. CSS: --harmony-1: #2463eb; --harmony-2: #ebac24;

Use the complement sparingly, for one button or highlight, and let the base color dominate.

Three related colors for a calm section

Base colour #4f46e5, Harmony Analogous

#488fe5 (blue), #5048e5 (indigo), #9e48e5 (violet)

Three evenly spaced chart colors

Base colour #ff0000, Harmony Triadic

#ff0000, #00ff00, #0000ff

Pure red, green and blue are the triad of the RGB wheel. Less saturated bases give softer triads, such as #5048e5, #e55048, #48e550.

Four colors, two complementary pairs

Base colour #4f46e5, Harmony Tetradic

#5048e5, #e5488f, #dde548, #48e59e

Using Complementary Colour Finder

1
Enter the Base colour as a hex code or pick it with the color swatch.
2
Leave Harmony on Complementary to get the opposite color, or choose Analogous, Split complementary, Triadic or Tetradic.
3
Read the Harmony swatches. Each is labeled Base or with the hue rotation applied, such as +180deg, and has a copy button for its hex code.
4
Check the Values panel for Base hue and Complement HEX. The complement is shown for every harmony type.
5
Copy the CSS variables block, which lists the scheme as --harmony-1, --harmony-2 and so on, or download it as harmony.css.

Questions people ask

What is a split complementary color scheme?

A base color plus the two colors on either side of its complement, at 150 and 210 degrees. It keeps most of the contrast of a complementary pair with less tension. For red #ff0000 the tool returns #00ff80 and #0080ff, a spring green and an azure blue.

What is the difference between triadic and tetradic?

A triadic scheme has three colors spaced 120 degrees apart. A tetradic scheme has four colors spaced 90 degrees apart, which amounts to two complementary pairs. This tool's tetradic option always uses the evenly spaced square arrangement, not a rectangle with unequal gaps.

What are analogous colors?

Colors that sit next to each other on the wheel. Here that means the base plus the hues 30 degrees on either side, so the three share a family resemblance. For red #ff0000 they are the rose #ff0080 and the orange #ff8000.

Why is the complement the same lightness as my color?

Only the hue is rotated. Saturation and lightness are copied from the base color so the two carry similar visual weight. If you need a lighter or darker version of the complement, take the Complement HEX and adjust its lightness in an HSL converter.

Can I enter RGB or HSL values?

No. The Base colour field takes a 3-digit or 6-digit hex code, with or without the # sign, or a color chosen with the picker. Convert rgb() or hsl() values to hex first. Results are given as hex codes.

How many colors should I use from a harmony?

A common guide is the 60-30-10 split: about 60% of the area in one dominant, usually muted, color, 30% in a second, and 10% in the accent. With a complementary pair, that means the complement appears only on the few elements you want noticed.

Do complementary colors make readable text and background pairs?

Often not. Two colors of opposite hue and equal lightness can have a very low contrast ratio and appear to vibrate where they meet. Make one much lighter or darker than the other, and confirm the pair reaches 4.5:1 for body text.

Does the tool show the complement when another harmony is selected?

Yes. The Complementary colour swatch and the Complement HEX value appear for every Harmony setting. The CSS variables block lists only the colors of the selected harmony.