Color Inverter – Find the Inverted Color of Any Color
Enter a HEX, RGB or HSL color to calculate its exact RGB inverse, its hue complement and a hue-preserving dark-mode flip. Compare the results side by side, copy them, and explore common inverted colors such as blue, green, yellow, orange and pink.
Last updated: October 23, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Invert Colors?
"Opposite colour" means three different things, and this tool calculates all three so you can pick the one you meant:
- **RGB inverse (the negative):** subtract each channel from 255 — R′ = 255 − R, G′ = 255 − G, B′ = 255 − B. This is what you see in the negative of a photograph. - **Hue complement:** the colour directly across the HSL colour wheel (hue + 180°) with the same saturation and lightness. It equals (brightest channel + darkest channel) − each channel. - **Dark-mode flip:** keeps the hue and saturation and mirrors the lightness (L → 100% − L). Light tints become dark shades of the same hue, which is usually what you want when building a dark theme from a brand colour.
The first two are the same colour exactly when the brightest and darkest channels add up to 255. That holds for the pure primaries and secondaries and for orange (#FFA500), and fails for most other colours, so the two answers usually differ.
How to Use Invert Colors
Enter a HEX code, an rgb()/hsl() value, a CSS colour name such as tomato, or use the colour picker
The RGB inverse, hue complement, dark-mode flip and a readable-text recommendation appear instantly
Copy any value, or scroll to the chart to compare the three results for common colours
Common Use Cases
- Dark mode designers: use the dark-mode flip for a hue-preserving starting point, and the RGB inverse only when you want the photographic negative.
- CSS developers finding the hue complement for a border or shadow.
- Graphic designers creating negative image effects or a candidate high-contrast pair — verify with the Contrast Checker before using it for text.
- Accessibility reviewers checking the visual opposite of a brand colour, then confirming actual contrast separately.
Example Input and Output
Inverting a blue to find its RGB negative.
#3B82F6#C47D09What Is the Inverted Color of Blue?
Pure blue (#0000FF) has RGB values (0, 0, 255). RGB inversion subtracts every channel from 255, giving (255, 255, 0) — which is #FFFF00, yellow. For pure blue the hue complement is also yellow, because its darkest and brightest channels (0 and 255) add up to 255.
That match is specific to fully saturated blue. The widely used UI blue #3B82F6 inverts to a dark orange-brown (#C47D09), while its hue complement is a lighter orange (#F6AF3B) — the tool shows both results separately so you can see which one you meant.
What Is the Inverted Color of Green?
Pure RGB green (#00FF00) inverts to #FF00FF, magenta.
Many people mean a darker shade when they say "green." The standard CSS named colour green is (#008000), not (#00FF00), and it inverts to a different result: #FF7FFF, a light magenta. Enter your exact green above to get the precise inverse for your own shade.
What Is the Inverted Color of Yellow?
Pure yellow (#FFFF00) has RGB values (255, 255, 0). Inverting each channel gives (0, 0, 255) — #0000FF, blue.
What Is the Inverted Color of Orange?
For the common orange (#FFA500), RGB (255, 165, 0) inverts to (0, 90, 255) — #005AFF, a blue-toned colour. Different oranges invert to different results, so this figure applies specifically to (#FFA500); enter your own shade above for an exact answer.
What Is the Inverted Color of Pink?
For the standard CSS pink (#FFC0CB), RGB (255, 192, 203) inverts to (0, 63, 52) — #003F34, a dark teal-green. Different pinks invert to different results, so enter your exact shade above for a precise answer.
Opposite Color Finder
People searching for an "opposite color" usually mean one of three different things: the mathematical RGB inverse (255 − each channel), the hue complement — the opposite hue on the colour wheel, 180° away — or, for dark themes, the same hue with its lightness mirrored. These are usually not the same colour. Enter any HEX, RGB, or HSL value above to see all three side by side, so you don't have to guess which one was meant.
Three results for #3B82F6
RGB inverse #C47D09 (255 − each channel), hue complement #F6AF3B (opposite hue, same lightness: brightest + darkest channel = 246 + 59 = 305, so 305 − each channel) and dark-mode flip #0950C4 (same hue, lightness 60% → 40%). Pick "Blue" from Popular Presets to reproduce all three.
The calculation, worked through
For #3B82F6 (R 59, G 130, B 246): inverted R = 255 − 59 = 196 (0xC4), inverted G = 255 − 130 = 125 (0x7D), inverted B = 255 − 246 = 9 (0x09) — giving #C47D09.
Quick dark mode with CSS filters
filter: invert(1) hue-rotate(180deg) on a whole element flips light and dark but approximately keeps hues, which is a fast prototype. It also inverts photos and videos (re-apply the same filter to them to undo it), and hue-rotate() is a linear approximation, so exact brand colors drift. Use per-color values from this tool for production themes.
Alpha and short HEX input
Alpha is not one of the inverted channels. The inverse HEX is always opaque; the RGBA/HSLA exports and JSON keep your alpha, and the readable-text check composites the inverted color over white.
Browser-side only
All processing runs locally in your browser.
Frequently Asked Questions
What is the opposite of a HEX color?
It depends which "opposite" you mean. The RGB inverse subtracts each channel from 255 (#0000FF → #FFFF00); the hue complement takes the opposite hue on the colour wheel while keeping saturation and lightness; the dark-mode flip keeps the hue and mirrors lightness. This tool shows all three for any value you enter.
Is the inverted color the same as the complementary color?
Only sometimes. The two are identical exactly when the brightest and darkest RGB channels add up to 255 — true for pure red, blue, yellow and orange, but not for #3B82F6 (inverse #C47D09, complement #F6AF3B), pink, green or most other colors.
Why do the RGB inverse and hue complement of blue match here?
For pure blue (#0000FF) both are yellow (#FFFF00), because its channels (0 and 255) add up to 255. Most "blue" in real designs is not pure blue: the common #3B82F6 inverts to a brown-orange (#C47D09) but has an orange hue complement (#F6AF3B). Painters' RYB wheels pair blue with orange, which is a third convention and not what screens use.
How do I make a dark-mode version of a brand color?
Start from the dark-mode flip rather than the RGB inverse. It keeps the hue, so a blue stays blue (#3B82F6 → #0950C4) instead of turning brown. Colors at exactly 50% lightness, such as pure red, do not change at all, so a flip is a starting point: tune it by eye and check text contrast before shipping.
What happens when I invert white, black or gray?
White (#FFFFFF) becomes black (#000000) and black becomes white. Mid-gray #808080 becomes #7F7F7F because 255 − 128 = 127, so it barely changes. Its hue complement is itself.
Does inverting a color twice return the original?
Yes, for the RGB inverse: 255 − (255 − channel) = channel, so you always get back the exact value. The hue complement is also reversible. The dark-mode flip returns the original to within one or two channel steps because of rounding to whole numbers.
Are inverted colors automatically readable or accessible?
No. An inverted color can have worse contrast than the original. Check the contrast ratio and AA pass/fail badges shown next to the result, or use the Color Contrast Checker for a full foreground/background review.
Which color formats can I paste in?
HEX with 3, 4, 6 or 8 digits (the last two carry alpha), rgb()/rgba() and hsl()/hsla() in either the comma form or modern space form such as rgb(59 130 246 / 50%), rgb() with percentage channels, and CSS color names such as tomato.
How do I invert a whole palette at once?
Open Advanced Options and use Batch color inversion. Paste 2–10 colors (one per line or comma-separated) to get each RGB inverse and hue complement, then copy them as CSS variables, JSON or CSV, or download a PNG swatch strip.
What is the inverted color of red, blue, green, or another common color?
For the standard CSS named-color hex values: red (#FF0000) inverts to cyan (#00FFFF), blue (#0000FF) to yellow (#FFFF00), green (#008000) to light magenta (#FF7FFF), yellow (#FFFF00) to blue (#0000FF), brown (#A52A2A) to teal (#5AD5D5), purple (#800080) to light green (#7FFF7F), orange (#FFA500) to blue (#005AFF), and pink (#FFC0CB) to dark teal (#003F34). Other shades of the same name invert differently, so enter your exact value.
Can I invert the colors of a whole image or photo?
Not on this page: it works on single color values. To invert every pixel of a photo or screenshot, open the Image Filters tool and set its Invert slider to 100%.
How do I turn on inverted colors on my phone or computer?
That is a device accessibility setting, separate from this color calculator. Look under Accessibility or Display settings; the exact steps vary by device and OS version.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and HWB. Includes tints & shades, WCAG contrast ratio, CSS snippets, and color history.
Color Contrast Checker
Check color contrast ratios for WCAG AA and AAA across text, buttons, icons, and UI components.
Color Palette Generator
Generate harmonious color palettes and schemes.
Image Color Extractor
Extract a dominant color palette from any image using quantization — get 5–10 key colors with Hex, RGB, and HSL codes.
Tint and Shades Generator
Generate tints (lighter) and shades (darker) of any colour in steps. Shows HEX codes and live swatches for each level.
Color Desaturation
Gradually desaturate a colour from full saturation to greyscale. Shows 6 steps with live swatches and HEX codes.
Part of a Collection
Posts for This Tool
Broader workflow content that links this tool back into the wider cluster.
How to Create an Inverted Color Palette for UI Design
A practical workflow for inverting a UI color palette — batch inversion, CSS variables, and the accessibility checks an inverted palette still needs.
Inverted Color Chart: Common Colors and Their RGB Opposites
Common colors and their RGB inverses, explained. Learn why "green inverted" or "brown inverted" depends on the exact shade, and how RGB inversion differs from HSL complements.
How to Turn On Invert Colors on Android, iPhone, Windows, and Mac
Step-by-step instructions for turning on invert colors as an accessibility display setting on Android, iPhone/iPad, Windows 11, and macOS.