Invert the colors in an image

Replace each visible RGB channel with its 8-bit complement.

freeworks offlinenothing uploaded
ToolInvert Colors
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Every RGB channel becomes 255 minus its current value, then Canvas redraws the image at its original size and emits PNG. Alpha is not inverted.

  • Full inversion is the only mode.
  • Transparency remains transparency.

Worked example

Invert a test tile
Input
											data:image/png;base64,iVBORw0KGgo=
Output
												PNG data URL with each RGB channel complemented

When to use this

Design mock-ups preview negatives, dark-mode experiments test inversion, and graphics lessons demonstrate RGB complements.

Edge cases

  • Black becomes white while transparent pixels keep their alpha.
  • Byte inversion is not perceptual-lightness inversion.
  • JPEG input is decoded and re-encoded as PNG.

References