Invert any hex color - find the opposite instantly.
Hex color inverter that finds the opposite of any color. Enter a hex code like #3498db or a color name like red, and get the inverted color with hex, RGB, and HSL values. Use it as an inverted color wheel, color inverter, or opposite color finder.
Original color
Inverted color
How inversion works
Each RGB channel is subtracted from 255. Red 52 becomes 203, Green 152 becomes 103, Blue 219 becomes 36. The result is the complementary color on the opposite side of the RGB color wheel.
Quick reference - common inverted colors
How to find the inverted color of a hex code.
Enter a color
Type a hex code (#ff5733, #abc), or a color name like red, orange, gold, or turquoise. The tool accepts all 140+ standard CSS color names.
View the inversion
The opposite color appears instantly with large swatches and a breakdown of hex, RGB, and HSL values. The explanation shows the math behind each channel.
Copy and use
Click any hex value to copy it to your clipboard. Use the Swap button to feed the inverted color back in and verify the round-trip.
When you need an inverted color.
Dark mode color calculations
Converting a light-theme palette to dark mode often starts with inverting the background and text colors. Inverting #F5F5F5 (near-white) gives #0A0A0A (near-black). Accent colors need manual tuning after inversion because fully saturated colors can produce harsh results on dark backgrounds. Use the inverted value as a starting point, then adjust saturation and lightness by 10-15% for readability.
Accessibility contrast overlays
Screen readers and accessibility tools sometimes invert page colors for users with visual impairments. Testing your design with inverted colors reveals whether your layout depends on specific color recognition rather than contrast. If your inverted palette remains legible, your color contrast ratios are strong enough for WCAG compliance.
Graphic design and art
Inverted colors create strong visual contrast in poster design, album artwork, and social media graphics. A common technique: place an image next to its color-inverted version for a split composition. The effect works because every light area becomes dark and every warm tone becomes cool, creating instant tension.
CSS and web development
The CSS filter: invert(1) property applies this same calculation to entire elements. This tool lets you preview the inverted hex value before writing CSS, which is faster than applying the filter and inspecting with DevTools. For color scheme toggles, pre-computing inverted values avoids the rendering cost of real-time CSS filter application.
Color inversion - the math and the edge cases.
RGB color inversion is deterministic: input A always produces output B, and inverting B returns A. The formula for each channel is inverted = 255 - original. This means middle gray (#808080, where all channels are 128) inverts to #7F7F7F (all channels 127) - nearly identical. Colors closest to middle gray change the least under inversion, while colors at the extremes (pure white, pure black, fully saturated primaries) produce the most dramatic shifts.
Why short hex codes produce unexpected results
The short hex code #F00 expands to #FF0000 (pure red), which inverts to #00FFFF (cyan). But #F30 expands to #FF3300, which inverts to #00CCFF - a sky blue, not cyan. The three-character shorthand doubles each digit, so small changes in the short form create large jumps in the expanded value. Always check the expanded hex to understand what you are inverting.
Inverted color wheel vs. complementary color wheel
Traditional color theory defines complementary colors as pairs opposite each other on the hue wheel: red/green, blue/orange, yellow/purple. RGB inversion does not follow this model. Red (#FF0000) inverts to cyan (#00FFFF), not green. Blue (#0000FF) inverts to yellow (#FFFF00), not orange. The systems align for some colors and diverge for others because RGB inversion operates on channel values independently, while hue-wheel complementarity rotates the hue angle by 180 degrees. Both have valid uses - choose the right one for your context.
Invert image colors?
Use the full image color inverter to invert every pixel in a photo or graphic.
Contrast AdjusterFrequently asked questions.
What is the opposite color of red?
The inverted color of red (#FF0000) is cyan (#00FFFF). Inversion subtracts each RGB channel from 255: Red 255 becomes 0, Green 0 becomes 255, Blue 0 becomes 255. The result is cyan, which sits directly opposite red on the RGB color wheel. This is different from the complementary color in traditional color theory (which would be green), because RGB inversion operates mathematically on each channel independently rather than rotating around a hue wheel.
What is the opposite color of green?
Green (#008000) inverts to #FF7FFF, a magenta-pink shade. The standard web green is not pure max-green (that would be #00FF00 which inverts to #FF00FF, pure magenta). Because web green uses 128 for the green channel instead of 255, its inversion produces 127 in the green channel, shifting the result toward a reddish-magenta rather than pure magenta. If you enter lime (#00FF00), you get #FF00FF - pure magenta.
How does hex color inversion work?
Each hex color has three channels: Red, Green, and Blue, each ranging from 0 to 255. Inversion subtracts each channel value from 255. For #3498DB (a medium blue), Red 52 becomes 203, Green 152 becomes 103, Blue 219 becomes 36, producing #CB6724 (a burnt orange). The formula is simple: inverted = 255 - original for each channel. The result always has the same luminance distance from middle gray as the original, but on the opposite side of the color space.
Is color inversion the same as complementary colors?
No. RGB inversion and complementary colors are different operations. Complementary colors sit 180 degrees apart on the HSL hue wheel - red and green are complementary. RGB inversion subtracts each channel from 255 independently, which does not always produce a 180-degree hue rotation. For fully saturated primary colors (pure red, green, blue), the results overlap. For desaturated or mixed colors, they diverge significantly. Designers use complementary colors for contrast, while developers use inverted colors for dark mode calculations and accessibility overlays.
What is the inverted color of yellow?
Yellow (#FFFF00) inverts to #0000FF, which is pure blue. Yellow is made of full red (255) and full green (255) with no blue (0). Subtracting each from 255 gives 0, 0, 255 - pure blue. This makes intuitive sense on the RGB wheel: yellow and blue are polar opposites. The same logic applies to cyan (#00FFFF) inverting to red (#FF0000), and magenta (#FF00FF) inverting to green (#00FF00).
Can I invert a color by name instead of hex code?
Yes. Type any standard CSS color name - red, blue, green, orange, purple, cyan, magenta, gold, coral, salmon, turquoise, and 40+ others. The tool resolves the name to its hex value, then computes the inversion. Named colors use the exact values defined in the CSS specification, so "green" resolves to #008000 (not #00FF00, which is "lime"). This distinction matters because the inverted result depends on the exact RGB values.
What is the opposite of orange?
Orange (#FFA500) inverts to #005AFF, a vivid blue. Red 255 becomes 0, Green 165 becomes 90, Blue 0 becomes 255. The result is a saturated blue with a slight greenish tint. If you need the exact inverted hex for a specific orange shade (like #FF8C00 dark orange), type the hex code directly rather than the name to get the precise complementary value for your design.
Are my inputs sent to a server?
No. The hex color inverter runs entirely in your browser using JavaScript math. No data is sent anywhere. The calculation is instant because it only requires subtracting three numbers from 255. There are no network requests, no API calls, and no cookies or tracking related to the colors you enter.