How to invert colours in an image
- Add your image: drop, paste or choose a JPG, PNG, WebP or GIF.
- Pick a mode. Full invert makes a classic negative. The other modes change only part of the colour information, described below.
- Adjust strength to blend between the original (0%) and the full effect (100%). At 50% a full invert turns everything flat gray, which is a quick way to see why inversion and mid-tones do not mix.
- Download a PNG (keeps transparency) or a JPG. Hold the compare button to flash the original.
What each mode does
| Mode | Formula | Example: #336699 becomes | Use it for |
|---|---|---|---|
| Full invert | R′ = 255 − R, same for G and B | #CC9966 | Negatives, X-ray looks, reading scanned negatives |
| Per channel | Invert only the ticked channels | Red only: #CC6699 | Glitch art, colour experiments, fixing swapped channels |
| Grayscale + invert | Y = 0.299R + 0.587G + 0.114B, then 255 − Y | #A2A2A2 | Black and white negatives, printing dark screenshots with less ink |
| Invert hue only | HSL hue + 180°, keep S and L | #996633 | Surreal colour shifts that keep normal contrast |
| Invert brightness | HSL lightness 1 − L, keep H and S | #6699CC | Dark mode versions of diagrams and screenshots |
Transparency is never inverted, so a logo on a transparent background keeps its shape. Full invert is its own reverse: inverting an already inverted image gives back the original exactly.
Inverting a colour code
The second tab works on a single colour. Type a HEX code (#336699 or shorthand #369), an rgb() value or an hsl() value, or use the picker. You get three swatches with HEX, RGB and HSL values ready to copy:
- Inverted: each channel subtracted from 255. In hex this is the same as subtracting each digit pair from FF, so
#1E90FFbecomes#E16F00. - Complementary: the hue rotated 180° with saturation and lightness unchanged. This is the partner designers use for accent colours, because it has the same visual weight as the original.
The contrast ratio between a colour and its inverse is shown too. Light and dark colours invert to high contrast, but mid-tones such as #808080 invert to almost themselves (#7F7F7F), so an inverted colour is not a reliable way to pick readable text. Check pairs with the colour contrast checker.
| Colour | Inverted | Complementary |
|---|---|---|
| #FF0000 red | #00FFFF cyan | #00FFFF cyan |
| #00FF00 green | #FF00FF magenta | #FF00FF magenta |
| #0000FF blue | #FFFF00 yellow | #FFFF00 yellow |
| #336699 steel blue | #CC9966 tan | #996633 brown |
| #FFA500 orange | #005AFF blue | #005AFF blue |
| #808080 gray | #7F7F7F gray | #808080 gray |
Why invert an image?
- Scanned film negatives: invert a phone photo of a negative strip to preview what is on it. Colour film needs further correction for the orange mask; black and white film works directly with Grayscale + invert.
- Dark mode assets: black line drawings, charts and signatures on white become white on black. Use Invert brightness to keep brand colours recognisable.
- Saving ink: dark-themed screenshots print much lighter after inversion.
- Art and effects: negative portraits, poster art, and glitch effects with per-channel inversion.
- Seeing detail: some people find faint text, X-rays or astronomy photos easier to read inverted, because the eye picks out dark detail on light backgrounds more easily.
Inverting colours elsewhere
On a web page, CSS does it with filter: invert(1), and filter: invert(1) hue-rotate(180deg) gives the brightness-only effect used by many dark-mode extensions. In image editors the shortcut is Ctrl/Cmd+I in Photoshop, and Colors → Invert in GIMP. For the whole screen, Windows uses the Magnifier colour inversion (Ctrl+Alt+I while Magnifier is on), macOS has Accessibility → Display → Invert colours, and iPhone offers Smart Invert and Classic Invert. This page is handy when you need the inverted file itself, not just an inverted view. For other one-click effects, see grayscale image and pixelate image.
Frequently asked questions
How do I invert the colors of an image?
Drop or paste the image into the box above. It is inverted instantly in Full invert mode, which turns every pixel into its opposite: black becomes white, red becomes cyan, blue becomes yellow. Press Download PNG or Download JPG to save it.
What is the inverted color of a hex code?
Subtract each channel from 255 (FF in hex). #336699 becomes #CC9966, #FF0000 becomes #00FFFF, and white #FFFFFF becomes black #000000. Use the Invert a colour code tab to calculate it and copy the result.
Is the inverted color the same as the complementary color?
Not always. Inverting flips brightness as well as hue, so a dark blue becomes a light orange. The complementary color keeps the same saturation and lightness and only rotates the hue by 180 degrees, so a dark blue becomes a dark orange. For pure primaries and secondaries the two are the same.
How do I make a photo look like a film negative?
Use Full invert for a colour negative look, or Grayscale + invert for a black and white negative. Real colour film negatives also have an orange mask, so inverting a scanned negative needs colour correction afterwards.
What does invert hue only do?
It rotates every colour to the opposite side of the colour wheel while keeping its brightness and saturation, so light areas stay light and shadows stay dark. Skies turn orange and skin turns blue-green, but the photo keeps its normal contrast.
How do I invert brightness but keep the colours?
Choose Invert brightness, keep colours. It flips lightness in HSL space, so black backgrounds become white and white text becomes black, while a red stays red. This is similar to the Smart Invert accessibility setting on phones.
Is my image uploaded?
No. The image is processed with the HTML canvas in your browser and never leaves your device.