About the Color Inverter
What is a color inverter?
A color inverter takes a color and flips it to its opposite. The classic version is the negative: every channel is subtracted from 255, so red (255, 0, 0) becomes cyan (0, 255, 255) and a light background turns dark. It's the same math your operating system uses when you switch on "invert colors" for accessibility, and it's how a film negative works. Paste a HEX code, drag the RGB sliders, or pick a color off your screen, and the inverted version appears next to it straight away, with copy-ready codes in HEX, RGB, HSL, HSB and CMYK.
We built this because "invert" means a few different things depending on who's asking, so the tool shows all of them side by side. Alongside the negative you get the complementary color (the true opposite on the color wheel), an inverted-lightness version that keeps the hue but swaps light for dark, and a grayscale conversion. Everything runs locally in your browser — nothing is uploaded — so it's quick and private whether you're checking one swatch or a whole palette.
How to Use This Tool
- Enter your color. Type a HEX code, use the color picker, nudge the R, G and B sliders, or hit Pick from screen to grab a color with the eyedropper.
- Read the result. The original and its inverted version sit side by side, each labeled with its HEX and RGB values.
- Choose the inversion type. Switch between Negative, Complementary, Invert lightness and Grayscale to see — and copy — each one.
- Copy the code you need. Grab any single format with its copy button, or copy every format at once.
- Check the contrast. The panel shows the WCAG contrast ratio between the two colors, handy for deciding whether they work as text and background.
Common Use Cases
- Designing dark and light modes: Invert lightness keeps a brand hue recognizable while flipping it for a dark theme.
- Finding an accent color: The complementary color is a fast starting point for a color that pops against your base.
- Accessibility testing: See exactly what a UI looks like once a user turns on inverted colors, and check the contrast ratio at the same time.
- Fixing "invert" in code: Grab the negative of a CSS color when you're recreating a
filter: invert() effect with real values.
- Learning color theory: Compare a negative against a true complement to see why they're not always the same color.
Want to invert a photo instead of a single color? Use our Image Inverter. You can also grab colors with the Color Picker or explore full details for any color in the Color Information tool.
Frequently Asked Questions
How do you invert a color?
To invert a color you subtract each of its red, green and blue values from 255. So a color with RGB (30, 90, 200) inverts to (225, 165, 55). In HEX, that means replacing each pair of digits with its complement — the tool does the arithmetic for you and shows the result in every common format.
Is an inverted color the same as a complementary color?
Not usually. Inverting (the negative) works on the raw red, green and blue channels, while the complementary color is the hue directly opposite on the color wheel with the same saturation and lightness. For a fully saturated primary like pure red they happen to match, but for most colors — especially muted or dark ones — they come out different. That's why we show both.
What is the inverted color of black and white?
Black (#000000) inverts to white (#FFFFFF), and white inverts back to black — they're exact opposites. A mid-gray like #808080 inverts to #7F7F7F, which is almost the same shade, so inverting a near-gray color barely changes it and gives very low contrast.
Does inverting a color twice give the original back?
For the negative, yes — inverting the RGB channels a second time returns the exact color you started with, because subtracting from 255 is its own reverse. Use the "Use the result as the new input" button to try it. Grayscale is not reversible, since turning a color to gray throws away its hue.
Is my color data private?
Yes. All the math runs in your browser with JavaScript. Nothing you type or pick is uploaded, saved to a server or logged, and the tool keeps working offline once the page has loaded.
