Inverting image colors is the byte-level replacement of every red, green, and blue channel with its complementary value, applying the formula output = 255 minus input to each channel while leaving the alpha channel unchanged. When applied to a fully opaque source, this rule turns black into white, white into black, red into cyan, green into magenta, and blue becomes yellow, with no perceptual correction, gamma adjustment, or film-mask removal involved. Figma users who want this effect on a raster image such as a JPG, PNG, GIF, or WebP cannot apply it directly inside Figma, because Figma's native color controls target fills, strokes, and layer effects rather than the pixel data inside an imported bitmap. The reliable path is to export the image from Figma, run a local browser-based RGB inversion, then drop the new still PNG back into the same Figma file as a replacement layer.
Why Figma cannot invert a raster image on its own
Figma treats imported bitmaps as opaque pixel containers. You can move them, resize them, mask them, blend them with layer opacity, and apply blend modes such as Difference or Invert on the whole layer, but the underlying byte values inside the PNG, JPEG, GIF, or WebP stay exactly as they were when you placed them. Native layer blend modes re-combine pixels with whatever sits beneath them in the frame; they do not rewrite the stored bytes.
True byte-level inversion only happens for vector fills, strokes, text, and a small set of effects on Figma-owned layers. The moment you drop a JPG from a phone, a PNG screenshot, or a WebP from a marketing export onto a Figma canvas, you have committed the colors to fixed raster bytes. Designers reach for plugins or, more commonly, edit the file outside Figma first and swap it back in.
The Invert Image Colors tool fits that external-edit step. It reads the actual byte container, decodes the initial frame through the browser, applies the formula against every RGBA slot that the Canvas exposes, and exports a still PNG at the natural dimensions. Nothing is uploaded, nothing is recompressed by a server, and nothing is sampled or resized without your permission.
Export the image out of Figma first
Start inside Figma by exporting the image you want inverted. Select the layer in the Layers list, then choose Export in the right panel. For the tool's container check to succeed, pick the format that is closest to the source you are inverting:
- PNG if your source has transparency or sharp edges such as UI screenshots, icons, or stickers.
- JPEG for photographs and noisy product photos, accepting the lossy compression trade-off.
- GIF when the source is an animated GIF and you want a still preview of the first frame inverted.
- WebP when the source is a modern web export with transparency.
Keep the export at the original resolution. The inversion tool refuses files where either decoded edge exceeds 8,192 pixels or where the total pixel area exceeds 24,000,000, so a 4K or 8K photo can legitimately be rejected before any inversion happens. If your export is too large, downscale the layer first with the Image Resizer workflow before exporting, or crop the unused edges.
Invert your image locally with the browser tool
Once you have the file on disk, the inversion itself takes three operating steps and stays in your current browser tab.
- Open the Invert Image Colors page and choose a PNG, JPEG, GIF, or WebP file. Wait for byte-container detection, browser decoding, and dimension validation to finish without errors.
- The tool inverts the decoded initial frame and shows two natural-size PNG previews side by side: the source on one side and the inverted result on the other. Compare them to confirm the effect matches the look you want.
- Confirm the dimensions and the reported output byte size, then download the still PNG. The file lands in your downloads folder with a real PNG container and natural pixel dimensions.
The download happens through the Canvas toBlob pipeline, so the output is a complete PNG, never a truncated file or a silently downgraded JPEG. If the inversion fails because of a guard such as a null Blob, an output above 32 MiB, or a synchronous exception, the busy state clears and no stale download remains visible, so you can re-run the step with confidence.
Use the inverted PNG back inside Figma
Drag the downloaded PNG straight into the open Figma file. Figma treats it as a fresh bitmap layer with the inverted colors already baked into the pixels. Position the new layer on top of the original, rename it for clarity, and either hide or delete the source layer once you have verified the replacement matches your frame layout.
If the original image sat inside a component or a locked frame, place the new layer on the same frame, then right-click the source and send it to the back, or delete it after copying its transform properties with the move tool. Designers who prefer a non-destructive round-trip often keep a source layer muted and use the inverted layer above it so the file can be toggled without re-running the export.
For larger artboards or design systems that already use shared components, a clean approach is to store the inverted PNG in a Figma asset library or in a connected team library so every consumer frame pulls the same inverted version.
The color mapping rule, written as a table
The inversion rule is the same byte-level math Figma uses for vector fills and strokes. Because it is byte arithmetic and not perceptual, the mapping below is exact:
| Source color | RGB input | Inverted RGB output | Visible result |
|---|---|---|---|
| Pure black | (0, 0, 0) | (255, 255, 255) | White |
| Pure white | (255, 255, 255) | (0, 0, 0) | Black |
| Pure red | (255, 0, 0) | (0, 255, 255) | Cyan |
| Pure green | (0, 255, 0) | (255, 0, 255) | Magenta |
| Pure blue | (0, 0, 255) | (255, 255, 0) | Yellow |
| Mid gray | (128, 128, 128) | (127, 127, 127) | Near mid gray, one byte off |
The last row is intentional: a true mid-gray byte is 128, and 255 minus 128 gives 127, not 128. The byte rule does not snap to a perfect mirror, it produces the literal complementary byte. Running the inversion twice on the same decoded bytes therefore returns the same original values, which is the simplest way to confirm that the algorithm is byte-exact and not approximated.
File, edge, and pixel limits to know before you start
Four independent limits decide whether the tool accepts your file or refuses it before inversion. All are checked at exact boundaries, and going one byte or one pixel past them causes rejection:
| Limit | Value | Where it is checked |
|---|---|---|
| Input file size | 15 MiB maximum | Reported File size and actual ArrayBuffer length |
| Decoded edge length | 8,192 pixels maximum per side | After createImageBitmap reports dimensions |
| Decoded total area | 24,000,000 pixels maximum | Width times height of the decoded bitmap |
| Output PNG size | 32 MiB maximum | After Canvas encodes the result |
The 15 MiB input budget and the 32 MiB output budget are deliberately separate, because a decoded PNG can balloon in size once every pixel is fully opaque, especially for noisy photographs. If the inverted PNG would exceed 32 MiB, the tool fails the export before it publishes a URL, so you never see a half-written file or a silently lossy JPG substituted for a PNG.
The container check is also byte-strict. The tool does not trust the filename, the file-picker filter, or the operating-system MIME label. It verifies the PNG signature plus IHDR and terminal IEND, JPEG's SOI, following marker, and terminal EOI, the GIF87a or GIF89a header with logical-screen structure and trailer, or the WebP RIFF size plus WEBP marker and a bounded VP8, VP8L, or VP8X first chunk. Truncated magic bytes, renamed arbitrary files, and unsupported formats such as SVG, AVIF, HEIC, BMP, TIFF, or PDF fail before Canvas work begins.
What this effect is and is not
The inversion is a byte-channel visual effect, not a color-managed conversion and not film-negative restoration. It does not linearize gamma, model perceptual complementary colors, remove an orange mask from a scan, correct exposure, or carry out tonal grading. EXIF orientation tags, GPS, ICC color profiles, comments, and other source metadata are not carried into the PNG export, because Canvas pixel export does not preserve them. Keep the original file whenever animation, embedded profiles, or metadata matter.
Animated GIF and animated WebP inputs use the browser-decoded initial frame and become one still PNG. Later frames, timing, looping, palettes, and disposal behavior are not preserved, which is the correct behavior when the goal is a single inverted graphic for a Figma layer. If you need the inverted result inside an animation pipeline, split the source into frames first with the GIF Splitter, invert each tile, then reassemble them with a GIF maker.
Local browser processing improves privacy, but successful decoding is not malware analysis, content moderation, authorship verification, or proof that an image is safe to use. Treat the output as bytes you produced, not as evidence about the source.
Related reading: How to Pick a Color From an Image in Canva: 4 Quick Steps.