Original
#336699
Inverted
#cc9966
Help Us Improve
—
(—)
Invert a color online
Use this color inverter to invert colors from any hex instantly. Get RGB negative output and copy inverted hex codes as HEX, RGB, or HSL.
What is a color inverter?
Color inverter features
Color picker and hex input
Choose visually or paste a six-digit hex—the inverted swatch updates instantly.
One-step inversion
No slider—every pick runs full color inversion in one step.
Side-by-side preview
Original and inverted colors shown together for quick comparison.
Copy HEX, RGB, HSL
One-click copy for the inverted result in three common formats.
RGB channel negative
Each channel becomes 255 minus the source—predictable reverse color output.
No account
Free, unlimited previews in modern browsers.
How to invert colors from a hex
Set the original color
Use the picker or paste a six-digit hex—brand colors and UI tokens both work.
Copy the inverted result
Copy HEX, RGB, or HSL from the inverted panel into CSS, Figma, or code.
Tips for inverted colors
- 01
Photos use another route
For whole images, open Color Inverter—same RGB negative on every pixel.
- 02
Double invert resets
Paste an inverted hex back in to verify you return to the original.
- 03
Not HSL complement
Need hue-wheel complementary pairs? Inversion is RGB math, not a 180° hue rotate.
- 04
Paste from a picker
Sample on Image Color Picker, then paste the hex here for an instant inversion.
- 05
Pair with greyscale
After inversion, desaturate on Greyscale Desaturate Color if you need a neutral variant.
- 06
Check contrast
Inverted text on inverted backgrounds still needs readable pairs—use Colour Contrast Checker when unsure.
When to invert a color
Opposite color checks
Quickly answer questions like opposite color of green, red, blue, orange, or purple in RGB workflows.
Dark mode accents
Derive a high-contrast accent from a light-theme brand hex for dark UI shells.
Negative-style previews
See how a hue reads when reversed before building inverted palettes.
Accessibility checks
Compare a foreground hex with its inversion against alternate backgrounds.
CSS variables
Copy RGB or HSL of the inverted value into custom properties.
Design handoff
Share inverted hex codes without manual 255 − channel math.
Quick complements
Get a bold opposite for wireframes when you need a fast reverse color, not a full scheme.
Why use this invert color tool
Instant
No apply step—pick a color and copy the inverted result.
Private
Colors never leave your device.
Predictable output
Standard RGB negative every time—same math as image color inversion.
Multiple formats
HEX, RGB, and HSL for different handoff workflows.
Free
Unlimited previews and copies.
Honest scope
Single hex inversion—not batch photo conversion.
Technical details
- Algorithm
- Per channel: output = 255 − input (RGB negative).
- Input
- Six-digit hex via picker or text field.
- Output
- Inverted hex where each R, G, and B channel is negated.
- Output formats
- Lowercase HEX, rgb(), and hsl() strings.
- Processing
- Client-side only—no network requests.
- Browser support
- Modern Chromium, Firefox, and Safari.
Sources & References
“A color negative transforms each RGB channel value x to 255 − x. This operation reverses the tonal range: white becomes black, black becomes white, and each hue shifts to its RGB complement.”
RGB color inversion and negative images: Each input hex is decomposed into its R, G, and B components, then each channel is negated using the formula output = 255 − input. The inverted result is reassembled into the output hex. en.wikipedia.org/wiki/Color_negative
“Complementary colors are pairs of colors that, when combined or mixed, cancel each other out to produce a grayscale color. In the RGB model, the complement of a color is its RGB negative.”
Complementary colors: RGB inversion produces a result that is often visually similar to the hue-based complementary color, though it follows channel-wise negation rather than rotating hue on the color wheel. en.wikipedia.org/wiki/Complementary_colors
“Applying the bitwise NOT operation twice returns the original value. For 8-bit channels: 255 − (255 − x) = x for any integer x between 0 and 255.”
Self-inverse property of bitwise NOT: Color inversion is self-inverse: inverting the same hex twice returns the original color, since 255 − (255 − x) = x for each channel. en.wikipedia.org/wiki/Bitwise_operation#NOT