Color Inverter – Find the Inverted Color of Any Color
Enter a HEX, RGB or HSL color to calculate its exact RGB inverse. Compare the original and inverted colors side by side, copy the result, and explore common inverted colors such as blue, green, yellow, orange and pink.
Last updated: September 18, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Invert Colors?
Colour inversion works by subtracting each RGB channel value from 255: inverted R = 255 − R, inverted G = 255 − G, inverted B = 255 − B. This is a different calculation from the complementary colour on the HSL colour wheel, which rotates the hue by 180° instead — this tool shows both results separately so you can see how they differ. The RGB inverse is also what you see when you look at the negative of a photograph.
Inversion is used in design for exploring dark-mode colour variants, generating candidate contrast pairs, building negative-image effects, and comparing a colour against its hue complement.
How to Use Invert Colors
Enter a HEX code, RGB/HSL value, or use the colour picker
The inverted colour, hue complement, and a readable-text recommendation appear instantly
Copy any value for use in your project
Common Use Cases
- Dark mode designers generating an inverted colour as a starting point, not a finished dark theme.
- 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.
This is the mathematical RGB inverse, not the hue complement. Blue's hue complement (its opposite on the colour wheel) is a warm orange instead — the tool shows both results separately above so you don't have to guess 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 two different things: the mathematical RGB inverse (255 − each channel), or the hue complement — the opposite hue on the colour wheel, 180° away. These are not the same colour. Enter any HEX, RGB, or HSL value above to see both results side by side, so you don't have to guess which one was meant.
RGB vs HSL inversion
This tool does RGB channel inversion (255−value). For hue-based complementary colours, use the Color Converter tool and shift the hue by 180°.
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. This is the exact example shown above; you can reproduce it by picking "Blue" from Popular Presets.
Alpha and short HEX input
3-digit (#RGB), 4-digit (#RGBA), 6-digit (#RRGGBB), and 8-digit (#RRGGBBAA) HEX are all accepted, along with rgba()/hsla(). Alpha is not one of the three inverted channels — it passes through unchanged on the original colour and is re-applied when checking contrast, so an input with 50% alpha still shows a fully opaque inverted swatch value.
Browser-side only
All processing runs locally in your browser.
Frequently Asked Questions
What is an inverted color?
An inverted color is the mathematical negative of a color: subtract each RGB channel from 255. It is the same operation used to create a photo negative, and it is different from a color's hue complement, which comes from rotating the hue by 180° instead.
Is inversion the same as complementary colour?
RGB inversion (255−channel) is not the same as the HSL complementary (H+180°). Inversion gives the mathematical negative; the HSL complement gives the opposite hue on the colour wheel. This tool shows both.
What is the opposite of a HEX color?
There is no single "opposite" — it depends whether you mean the RGB inverse (255 minus each channel, e.g. #0000FF → #FFFF00) or the hue complement (the opposite hue on the color wheel). This tool calculates and shows both for any HEX value you enter.
What happens when I invert white or black?
Inverting white (#FFFFFF) gives black (#000000) and vice versa, since 255−255=0 and 255−0=255.
Does inverting a color twice return the original?
Yes. RGB inversion is its own inverse: 255 − (255 − channel) = channel. Invert any color twice and you get back the exact original value.
Does the inverted colour guarantee readable contrast?
No. Check the contrast ratio shown next to the result, or use the full Color Contrast Checker for a complete foreground/background review.
Are inverted colors automatically accessible?
No — an inverted color can have worse contrast than the original, not better. Never assume an inversion is readable; always check the contrast ratio shown next to the result before using it for text or UI.
Can I invert an entire color palette?
Yes — use the batch inversion panel below the main tool. Paste 2-10 HEX, RGB, or HSL values (one per line, or comma-separated) to get the RGB inverse and complementary palette for all of them at once, with CSS, JSON, CSV, and PNG export.
Is my data sent to a server?
No. All processing runs in your browser.
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) inverts to yellow (#FFFF00), green (#008000) inverts to light magenta (#FF7FFF), yellow (#FFFF00) inverts to blue (#0000FF), brown (#A52A2A) inverts to teal (#5AD5D5), purple (#800080) inverts to light green (#7FFF7F), orange (#FFA500) inverts to blue (#005AFF), and pink (#FFC0CB) inverts to dark teal (#003F34). Enter your exact shade above for a precise result, since these vary between different reds, greens, etc.
Can I invert the colors of a whole image or photo, not just one color code?
This tool inverts a single HEX, RGB, or HSL value. To invert every pixel in a photo or screenshot, use the Image Filters tool instead and set its Invert slider to 100%.
How do I turn on inverted colors on my device?
Device-wide color inversion is an accessibility display setting, different from this color calculator. It is usually available under Accessibility or Display settings on phones, tablets, and computers — the exact steps vary by device and operating system 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.