The digital complementary color of a six-digit hex value is the color produced by subtracting every 8-bit sRGB channel from 255, and that is exactly what the Complementary Color Finder displays as the inverse of your source color. On iPhone the tool runs in Safari or Chrome, so there is nothing to download from the App Store, no TestFlight build, and no account to create. Every result is deterministic and reproducible: red becomes cyan, green becomes magenta, blue becomes yellow, and the two endpoints of the scale, black and white, exchange places. The math runs entirely on the device, which means hex values never leave the phone and nothing is stored between visits. The tool states its RGB definition on the page so every answer can be checked by hand. The output is specifically a digital RGB inversion, not the 180-degree hue rotation used in HSL, not the subtractive mixing of traditional paint, and not the CMYK behavior of a print press. Knowing which definition a result follows is what separates a useful pairing from a misleading one.
What "Complementary" Actually Means on Screen
In casual conversation "complementary color" gets used for at least four distinct ideas, and only one of them is a byte-wise digital inversion. Keeping those ideas separate is the fastest way to avoid confusion when a designer's eyedropper disagrees with a hex calculator.
- Digital RGB inverse (this tool): each sRGB channel becomes 255 minus its original value. Reproducible, deterministic, independent of human perception.
- HSL hue complement: hue is rotated by 180 degrees on the color wheel while lightness and saturation are kept. This is what most design apps default to.
- Traditional paint complement: subtractive mixtures of pigments, which behave differently from additive light and depend on the pigments involved.
- Perceptual complement: a color chosen for visual opposition in a perceptual space such as CIELAB, often used for accessibility and brand contrast.
The Complementary Color Finder is scoped to the first definition and the page states so directly. That scope is what makes the difference between a hex value and its digital inverse producing a result that looks visually different from the "complement" produced by another app, even when the inputs are identical.
How to Find a Complementary Color on iPhone
The iPhone workflow is short because the tool is designed to run as a single page in a mobile browser. The steps below assume you already have a six-digit hex value from a design file, a screenshot, or a brand guide. If you need to read the value off the screen first, use Safari's screenshot editor and the built-in color picker, then return to this step.
- Open Safari or Chrome on the iPhone and navigate to the Complementary Color Finder page. The page loads as a self-contained document; no install prompt will appear.
- Enter the six-digit hex color into the input field, with or without a leading #. The page accepts exactly six hexadecimal digits and normalizes the output to lowercase, so #A1B2C3 and a1b2c3 produce the same answer.
- If you do not have a hex value yet, tap the color picker on the page to choose a color visually; the field fills in with the corresponding six-digit code.
- Tap the Find RGB complement action. The page computes the inverse by reading each channel as an integer from 0 to 255 and replacing it with 255 minus that value.
- Read the source swatch, the inverse swatch, the normalized lowercase hex, and the decimal red, green, and blue channels directly on the page. Nothing is sent to a server during this step.
- Use the iOS share sheet or the field's copy action to grab the inverse hex into Notes, Mail, or your design app. Pair the saved value with the original so you remember which direction the inversion ran.
A common follow-up is to save the page to the Home Screen so it behaves like a lightweight app. In Safari, tap the share icon, choose Add to Home Screen, then confirm. The result is a one-tap launcher that opens the tool directly, which removes the URL bar from the visible area on modern iPhones and keeps the workflow offline-capable once the page has loaded. For a deeper reference on the math behind this workflow, the companion guide How to Find Complementary Colors From a Hex Code walks through the same inversion step by step.
Reading the Output: Hex, RGB, and the Two Swatches
The tool exposes four artifacts at once so the result can be sanity-checked without leaving the page.
- Source swatch: a tile showing the color typed or picked. If this looks wrong, the input was wrong and the inverse will be wrong in the same way.
- Inverse swatch: a tile showing the byte-wise digital inverse. Compare the two visually to confirm the result is what was intended.
- Lowercase hex: the inverse expressed as #rrggbb in lowercase. CSS accepts either case, but lowercase keeps log files and diff tools consistent.
- Decimal RGB: the inverse expressed as three integers from 0 to 255. Useful when feeding a value into JavaScript, a design app, or any system that prefers channel numbers over a hex string.
A single worked example illustrates the full pipeline. Take #3a7f12 as the source. The red channel is 0x3a, which is 58 in decimal; the green channel is 0x7f, which is 127; the blue channel is 0x12, which is 18. Apply the formula 255 minus each channel:
- Red: 255 − 58 = 197, which is 0xc5
- Green: 255 − 127 = 128, which is 0x80
- Blue: 255 − 18 = 237, which is 0xed
Concatenating the three new bytes gives #c580ed. That string is exactly what the page displays for the input #3a7f12. If a hand calculation disagrees with the page, the difference is in the arithmetic, not in the tool.
Reference Pairings: Boundaries, Primaries, and Midpoints
A handful of fixtures describe how the formula behaves at the corners of the cube, at the additive primaries, and along the achromatic axis. The table below shows the canonical behavior so any color already known can be verified against the tool without typing it in.
| Source hex | Source color | Inverse hex | Inverse color | Why it matters |
|---|---|---|---|---|
| #000000 | Black | #ffffff | White | Endpoint exchange: the two achromatic poles swap. |
| #ffffff | White | #000000 | Black | Same rule, opposite direction. |
| #ff0000 | Red | #00ffff | Cyan | Primary swap: a maxed channel collapses to zero and the others go to full. |
| #00ff00 | Green | #ff00ff | Magenta | Same rule for green. |
| #0000ff | Blue | #ffff00 | Yellow | Same rule for blue. |
| #808080 | Mid gray | #7f7f7f | Near-mid gray | Midpoint asymmetry: 128 and 127 sit on either side of true 127.5. |
One of those rows illustrates an asymmetry worth knowing on iPhone as much as on desktop. True mathematical midpoint is 127.5, but integer channels round to either 127 (0x7f) or 128 (0x80). Inverting a value just below the midpoint produces a result just above it, so the inverse of the midpoint of the cube is not exactly itself; it sits one step off. That is a property of 8-bit color, not a bug in the tool.
What the Result Doesn't Tell You
The output is a single deterministic string, but several decisions remain yours. Treat the result as a starting point rather than a finished palette.
- Readability: an inverse pair is not automatically legible. Two colors that are mathematically opposite on the byte cube can still fail contrast checks if both are dark or both are light.
- Harmony: an inverse is not automatically harmonious. Digital inversion does not look for balance, temperature, or visual weight; it produces maximum mathematical distance on each channel.
- Brand fit: an inverse is not automatically on-brand. When working inside a brand palette, treat the inverse as a candidate and compare it against the existing system, not as a substitute.
- Gamut: the result lives entirely inside legacy sRGB. For wide-gamut or color-managed assets, the inverse in sRGB may not be the perceptually opposite color in the target space.
For print, CMYK, or wide-gamut work, the digital inverse is not the right complement. Use a tool scoped to that color model rather than treating the byte-wise result as a universal answer.
Check Accessibility Before You Ship the Pair
If the inverse is going to appear as a foreground and background pair — in a CSS banner, a status indicator, or any user-facing surface — run it through a dedicated contrast check. The formula behind this tool makes no guarantee about luminance ratio; it only guarantees that the two colors sit as far apart as the byte cube allows on each channel.
For that follow-up step, the Color Contrast Checker evaluates the pair against the WCAG AA and AAA thresholds so the inverse can be judged in context. The companion guide Complementary Color Finder and Accessibility Contrast walks through how inversions tend to fail in practice and what to look for before publishing.
The MDN reference on CSS rgb() and the W3C CSS Color 4 sRGB spec are useful background reading for confirming what "sRGB byte" actually means on iOS and why the tool scopes itself to that model rather than to a perceptual or print-based definition.