What is the formula for a digital complementary color?

Subtract each 8-bit channel from 255: new red equals 255 minus red, new green equals 255 minus green, and new blue equals 255 minus blue. Then convert the three new values back to a six-digit hex code.

Why does my complementary color look different in another tool?

Other tools often use the traditional color wheel, which places the complement directly across from the source hue rather than inverting each RGB channel. The Complementary Color Finder uses the strict 8-bit RGB invert that matches CSS, Photoshop, and Illustrator.

Does the tool work with three-digit hex codes?

It expects a six-digit hex code. Expand any shorthand like 2A6 to its full form 22AA66 before running the calculation.

What does the complement of grey look like?

A neutral grey such as 808080 inverts to itself, because 255 minus 128 equals 127 in every channel, which rounds to the same value. Pure black and pure white are the only true extremes.

Can I use the RGB complement for print design?

The RGB complement is a screen color. Convert it to CMYK before sending it to a printer, and preview the result because the printed shade will usually differ from the on-screen version.

How is this different from inverting an image?

Inverting an image applies the same 255-minus-channel formula to every pixel. The Complementary Color Finder applies that formula to a single hex code so you can use the resulting color anywhere, not just inside one image.

How to Find a Complementary Color for Any Hex Code

A digital complementary color is the exact 8-bit RGB inverse of a six-digit hex code, calculated by subtracting every channel value from 255: new red = 255 − R, new green = 255 − G, and new blue = 255 − B. The result lands on the opposite side of the RGB color cube and is the standard pair used in screen design, CSS, and most image-editing software for high-contrast accents. To find a complementary color for any hex code without doing the math by hand, use the Complementary Color Finder: paste your hex, click the invert action, and copy the matching swatch along with its exact channel values.

Designers and developers reach for complementary pairs for many reasons. The two colors sit at maximum contrast on the screen, so they naturally pull the eye to the element that uses the second color. That makes the complement a popular choice for call-to-action buttons, error states, focus rings, badges, and any small accent that needs to stand out from a larger field. Because the relationship is deterministic, the same input always returns the same pair, which keeps brand accents consistent across a site or product.

What the Complementary Color Finder Does

The Complementary Color Finder is a single-purpose browser tool built around one operation: the 8-bit RGB invert. You give it a six-digit hex code, and it returns the inverted hex along with the matching red, green, and blue values for both colors. The result is shown side by side as two swatches so you can preview the pairing visually before you copy anything.

The tool deliberately does not mix color models. There is no HSL rotation, no RYB wheel mapping, and no warm/cool adjustment. If you have ever been confused by why one tool returns a soft sky-blue complement while another returns a sharp orange, the answer is usually that one is using the digital RGB invert and the other is using a paint-wheel complement. The Complementary Color Finder stays with the digital invert because that is what CSS, JavaScript, Photoshop, and most design software actually mean when they say "complement."

Finding the Complement of a Hex Code

Open the Complementary Color Finder in your browser.
Type or paste a six-digit hex code such as 2A6F97 into the hex field, or click the color swatch to open a picker and choose a color visually.
Click the Find RGB complement action. The tool subtracts each channel from 255 and displays the inverted color next to your original.
Read the result panel. You will see the complement as a hex code, as RGB triplet, and as a swatch alongside your input color.
Copy the hex or RGB value you need. Use the hex for CSS, the RGB triplet for JavaScript or canvas code, and the swatch as a visual reference.

If you only have RGB values rather than a hex, the RGB to HEX converter can produce a hex first, which you then feed into the Complementary Color Finder. Conversely, if you need to read the channel values of the result after inverting, the HEX to RGB converter breaks any six-digit code into its red, green, and blue components.

How the RGB Complement Is Calculated

Every six-digit hex code represents three 8-bit channels packed into two-character pairs. The first pair is red, the second is green, the third is blue. Each pair is a base-16 number from 00 to FF, which is the same as 0 to 255 in decimal. The digital complement simply flips each channel to its opposite on that 0-to-255 scale, which is why 255 − channel is the formula.

Take the hex code 2A6F97 as a single worked example. Reading the pairs in decimal gives red = 42, green = 111, blue = 151. Subtract each from 255 to get the complement's channels: new red = 255 − 42 = 213, new green = 255 − 111 = 144, new blue = 255 − 151 = 104. Convert 213, 144, and 104 back to hex by dividing each by 16 for the high nibble and taking the remainder for the low nibble. 213 decimal is D5, 144 decimal is 90, 104 decimal is 68, so the complement hex is D59068. That is the entire calculation, and it is what the tool performs every time you click invert.

Where RGB Complements Differ From Paint-Wheel Complements

If you learned about complementary colors from a traditional color wheel in art class, the rule you remember is "pick the color directly across the wheel." That model works well for pigment mixing because subtractive color behaves differently than light. On screen, light is additive, and the strongest opposite to a given color inside an 8-bit RGB workflow is the channel-wise inverse, not a wheel position.

Aspect	Digital RGB complement	Traditional wheel complement
Definition	255 minus each channel of the source color	Hue directly across the color wheel
Color model	Additive (RGB)	Subtractive (pigment or RYB)
Used in	CSS, Photoshop, digital imaging	Painting, interior design, print guides
Effect on greys	Neutral greys stay neutral	Wheel complements can shift hue
Output	Deterministic from the hex code	Depends on which wheel is used

The practical takeaway is simple. If you are working on a screen, in CSS, in a digital photo, or in software that uses RGB, stick with the digital invert. The Complementary Color Finder uses that definition, so its output matches the colors you see in Photoshop when you choose Image, Adjustments, Invert, or in Illustrator when you choose Edit Colors, Invert Color.

Common Uses for a Complementary Pair

Once you have a complement in hand, the next decision is how to use it. A few patterns come up repeatedly in real design work, and each one takes advantage of the high-contrast relationship between the two colors.

Accent text on a colored background. Buttons, badges, and small labels read most clearly when their text color is the complement of the background. Run the final pair through a Color Contrast Checker to confirm it meets WCAG requirements before you ship.
Focus and hover states. Form fields and interactive elements often switch to the complement on focus, giving users a clear visual cue without changing the layout.
Illustrations and icons. A flat illustration that uses only two colors stays bold and readable when those two colors are complements.
Gradient endpoints. Linear gradients between two complements create high-energy transitions, which you can preview with a Color Gradient Generator.
Quick palette exploration. Once you have the complement, you can ask a Color Palette Generator to extend the pair into a full palette of analogous, triadic, and split-complementary shades.

Contrast is a double-edged property. Two colors that sit at maximum hue distance also create the strongest possible vibration when placed in equal amounts, which can be tiring on a large surface. Most designers reserve complements for small accents against a dominant base color, rather than splitting a layout evenly between the two.

Tips for Getting Reliable Results

The tool is straightforward, but a few habits will save you from surprises when you bring the result into a project.

Always confirm with the same hex string. Hex codes are case-insensitive but easy to mistype. The string 2A6F97 and the string 2a6f97 describe the same color, but a single missing digit breaks the calculation entirely.
Watch out for the shorthand form. CSS allows three-digit hex like #2A6, which expands to #22AA66. Convert shorthand to its six-digit form before running it through the tool to keep results predictable.
Include the leading characters. Some tools accept hex without the #, others require it. If the field does not accept a value, check whether the # is expected.
Pair the result with a contrast check. A complementary pair is high in hue contrast, but luminance contrast is what controls readability for text. Always run the final pair through a checker before using it on body copy.
Keep a record of the source hex. When a design evolves, you may need to recompute the complement from the original rather than invert the complement again. Inverting twice returns you to the source color, so work forward from your starting point.

If you want to explore variations of the same family after you have your pair, a Random Color Generator is a quick way to sample nearby hues and test whether a slightly shifted accent reads better than the strict complement.

Bringing the Complement Into Your Project

Once you have the hex code for the complement, drop it straight into CSS as a custom property, into a design token JSON file, or into the color picker of your editor of choice. The values are interchangeable between tools, so a hex produced by the Complementary Color Finder will look identical in Figma, Illustrator, and a browser preview.

For print work, remember that the RGB complement is a screen color and will need a separate conversion to CMYK before it can be sent to a press. The RGB to CMYK Converter handles that step in the browser, although the printed complement will almost certainly look different from the on-screen complement because the two color models describe color in fundamentally different ways. Pairing complements that look right on screen with a print preview is the safest path.

Frequently Seen Questions About Complementary Color Lookups

People often ask why two tools give different answers for the same color, why grey inputs return grey outputs, and whether the complement is the same on every device. The short version: the digital RGB complement is a fixed mathematical operation, so it does not change between devices or screens. What does change is how each display renders the resulting hex, because monitor calibration, panel technology, and color profiles all shift the visible color slightly. Treat the tool's output as an exact starting point and adjust by eye if a particular screen pushes one of the channels harder than you expected.

If your input is a perfectly neutral grey such as 808080, the complement is also 808080, because 255 − 128 = 127 rounds to 128 in every channel. Pure black inverts to pure white, and pure white inverts to pure black. Those edge cases are a quick sanity check that the formula is doing what you expect.

More on this topic: Convert RGB to HEX Online: Free Instant Color Tool.

If you're weighing options, Find the Complementary Color in Illustrator Fast covers this in detail.