Invert image colours
Turn any photo into its photographic negative by inverting every colour channel. White flips to black, light areas become dark, and each hue is replaced by its mathematical complement — useful for previewing scanned film negatives, accessibility and dark-mode design checks, or creative artwork.
How it works
The image is read into a <canvas> with getImageData. For every pixel the
tool replaces each colour channel with 255 − value:
R → 255 − RG → 255 − GB → 255 − B
The alpha (transparency) channel is left untouched, so transparent areas in a
PNG stay transparent after inversion. Because the operation is a self-inverse
subtraction, applying it twice returns the original image exactly —
255 − (255 − v) = v.
Colour inversion table
| Original colour | (R, G, B) | Inverted | (R, G, B) |
|---|---|---|---|
| Black | 0, 0, 0 | White | 255, 255, 255 |
| White | 255, 255, 255 | Black | 0, 0, 0 |
| Red | 255, 0, 0 | Cyan | 0, 255, 255 |
| Green | 0, 255, 0 | Magenta | 255, 0, 255 |
| Blue | 0, 0, 255 | Yellow | 255, 255, 0 |
| Dodger blue | 30, 144, 255 | Orange | 225, 111, 0 |
Practical uses
Film negative preview. When you scan colour negative film, the result is an orange-masked negative. Inverting the channels gives a rough positive preview of the image before colour correction. The orange mask means full film conversion needs additional white-balance work, but inversion is the essential first step.
Dark-mode and accessibility design. Inverting a UI mockup is a quick sanity check to see which elements rely on colour alone for meaning. If critical information disappears or becomes confusing after inversion, that is a hint that the colour usage may not meet accessibility contrast standards.
Creative effects. Inverted photos have an unsettling, photogram-like quality that works well in album art, posters, and experimental photography. The effect is fully reversible — apply it again to restore the original.
Icon and symbol art. A black symbol on white background becomes white on black in a single step — useful when you need both light and dark versions of a graphic icon.
Colour relationships after inversion
The inversion operation has a predictable effect on the hue wheel. Because each channel is flipped to its maximum minus its current value, complementary colours swap with each other:
- Red (255, 0, 0) becomes its complement cyan (0, 255, 255)
- Green (0, 255, 0) becomes its complement magenta (255, 0, 255)
- Blue (0, 0, 255) becomes its complement yellow (255, 255, 0)
- And each complement inverts back to its partner
Warm-toned photographs (oranges, yellows, reds) become cool and teal-green after inversion. Cool-toned images (blues, cyans) shift toward warm amber and orange. This colour flip is the reason inverted portraits look otherworldly — skin tones, normally warm, shift into cool blue-green territory.
Everything runs on a local <canvas> and your image is never uploaded.