Why Does Inverting a PNG Turn It Black?

A transparent background turning solid black or white after you invert an image's colors is an alpha-channel bug, not a color-math bug. Color inversion (new value = 255 minus old value) only makes sense for the red, green, and blue channels — the fourth channel, alpha, stores how see-through each pixel is and has nothing to do with color. A correct invert tool loops through every pixel and flips R, G, and B while leaving alpha exactly as it was. A broken one either lets alpha get swept up in the same math, or — more commonly — flattens the transparent areas onto a solid canvas color before inverting, which permanently bakes that color in as an opaque rectangle. Either mistake produces the same complaint: a logo or icon that used to sit cleanly on any background now drags a black or white box behind it.

A fully transparent PNG pixel is stored as four values — red, green, blue, and alpha — typically rgba(0, 0, 0, 0): black RGB with zero alpha, which is how most PNG encoders write invisible pixels. Run a naive 'invert every channel' loop over that pixel and you get rgba(255, 255, 255, 0): RGB flips from black to white, but alpha is still 0, so the pixel is technically still fully transparent. In a spec-correct renderer that's invisible either way — alpha 0 means alpha 0, no matter what color sits underneath it. The visible bug shows up when a tool goes a step further and composites the image onto an opaque backing color first (often whatever the canvas defaults to) before running the invert math. That backing color gets inverted and painted in at full opacity, and the alpha channel is discarded entirely — that's what produces a genuinely solid rectangle instead of a color change nobody would ever notice.

'Transparent white' and 'opaque black box' are two different bugs that both get reported as 'inverting broke my transparency.' Transparent white is the milder one: alpha stays at 0, so the image still renders correctly in any spec-compliant viewer, but it can look wrong in tools that don't fully respect alpha — editors that display transparency as a color instead of a checkerboard, or export paths that flatten the canvas later and pick up that white you couldn't normally see. Opaque black (or white) is the loud version: the tool discarded or overwrote alpha entirely during processing, so every previously invisible pixel is now a fully opaque colored rectangle sitting behind your logo — no viewer or editor will render that one correctly, because there's no transparency left to respect.

PixelTools' invert tool only touches R, G, and B — verified directly in its source (`src/lib/invert-utils.ts`). It draws your image onto an HTML canvas, reads the raw pixel array with `getImageData`, and loops through it four values at a time: `data[i] = 255 - data[i]` for red, then green, then blue. The fourth value in every group, `data[i + 3]` — alpha — is never assigned to; the code's own comment calls it out: 'alpha unchanged.' There's no flatten-to-canvas step and no background fill before that loop runs, so a transparent pixel's alpha byte passes through untouched from input to output. Practically: if you invert a PNG logo with a transparent background on PixelTools, it comes out with the same transparent background — no black box, no white box, no compositing surprise to catch later.

Verify any invert tool before trusting it with a real file. Take a small PNG with a fully transparent background — any icon exported with transparency works — invert it, then open the result on a colored page background, not the tool's own preview (which sometimes fakes a checkerboard regardless of what's actually in the file). If the colored background still shows through cleanly, the tool preserved alpha correctly. If you instead see a solid black or white rectangle where transparency used to be, the tool flattened or discarded the alpha channel during processing, and you should assume every transparent PNG you run through it will come out the same broken way.

If a file already came out with a black or white box where transparency should be, re-inverting that same file won't fix it — the alpha data is already gone, so there's nothing left to restore. Go back to your original, untouched source image and run it through a tool that's confirmed (with the test above) to leave alpha alone. If you no longer have the original, you can sometimes recover transparency by color-selecting the solid black or white box and deleting it in an image editor, but that only works cleanly if the box is a single flat color and doesn't overlap any pixels that are supposed to be that exact color on purpose.