Image Background Color

This tool puts one solid colour behind an image by flattening its alpha channel onto that colour. It is the fix for a transparent PNG logo that can show up against black — or another unexpected colour — in an email client, a document or an older web page: paint white behind it and every viewer shows white, because there is no transparency left to misinterpret. It is also how you place a cut-out product shot on a coloured backdrop, or give a transparent image a set background before saving it as a JPG, which cannot store transparency at all.

What "flattening" means: a canvas of the image's exact pixel size is filled edge to edge with your colour, and the image is then drawn on top of it. Opaque pixels of the image cover the colour completely; transparent and semi-transparent pixels let it show through and end up fully opaque. The saved file therefore has no transparency anywhere — every pixel is solid. That is the whole point, and it is permanent: the alpha information is not stored in the output, so it cannot be brought back from the saved file. Keep your transparent original if you may need it again.

Be clear about what this does not do. It does not remove a background that is already painted into the pixels. If a "transparent" logo actually has a white rectangle baked into its pixels rather than a real transparent area, this tool sees an ordinary image with no transparency and leaves that rectangle exactly as it is — painting a colour under the picture cannot delete pixels that are already there. Removing a painted background is a different job. This tool only fills the genuinely see-through parts.

How it works: your browser decodes the image (a phone photo is straightened using its EXIF orientation), fills a canvas with the colour you chose, draws the image on top, and re-encodes the result. Because the picture is redrawn on a canvas, EXIF metadata — camera, date and GPS location — is not copied into the result, which is a privacy gain in itself. Nothing is uploaded; the Network tab in your browser's developer tools shows no request carrying your images.

Limits: up to 50 images at a time, 50 MB each, and about 100 megapixels (16,384 px per side). iPhones and iPads allow a canvas of only about 16.7 megapixels, so a very large photo may fail there with a message saying so. If you choose JPG, the transparency is gone for good and the colour you picked is what sits behind the image, since JPG has no alpha channel to store anything else.

1. The colour is validated first: it must be #rgb or #rrggbb and is normalised to lowercase #rrggbb before any file is read. 2. The file's size is checked (50 MB), and its first bytes confirm it is PNG, JPG, WebP, GIF, BMP or AVIF before it is decoded. 3. The image is decoded upright (its EXIF orientation is applied) and drawn onto a canvas of its own pixel size. 4. The canvas is filled edge to edge with the chosen colour (fillStyle + fillRect), then the image is drawn on top with drawImage. Transparent pixels reveal the colour; opaque pixels cover it; the composite is fully opaque. 5. The canvas is encoded to the chosen format — PNG (lossless), JPG or WebP (lossy, at the quality you set) — and named like logo-background.png. 6. The saved file carries no metadata and no alpha channel: every pixel is opaque.