Sepia Image Filter

This tool applies a sepia tone to a PNG, JPG, WebP, GIF, BMP or AVIF image in your browser. A sepia tone is not a filter preset in the vague sense: it is one fixed 3 × 3 colour matrix, in which each output colour channel is a weighted sum of the three input channels. Red becomes 0.393 of the original red plus 0.769 of the green plus 0.189 of the blue; green and blue are mixed the same way with their own weights. Those are the standard coefficients, the same ones a browser uses for `filter: sepia()` and an SVG uses for `feColorMatrix`, so the result here matches what you would get from any other program that applies the standard tone.

The reason a sepia picture looks warm rather than grey is that the matrix never mixes the channels equally. Green contributes more than twice as much as blue to the red channel, which is what pushes warm colours (skin, wood, sunsets) further towards orange and leaves cool colours (sky, water, shadows) muddy. It is a recolouring, and a fairly crude one: it cannot pick out a face, it cannot brighten a highlight, and it cannot tell a colour that was already brown from one that was grey. A photograph that was shot in colour comes back as a warm monochrome, not as a picture that has been carefully toned.

The intensity slider controls how much of the tone is applied. At 100% you get the full matrix; at 0% the picture is left exactly as it was, pixel for pixel; in between, the two are interpolated, which is what a half-strength tone means — halfway between the original colour and the fully toned one. Lower intensities are useful when the full tone is too heavy: a logo, or a flat graphic, can lose all its colour separation at 100% but read perfectly well at 40%. The page says so when the intensity is 0, because a copy of the original is not a sepia picture and you should not have to guess why nothing happened.

The maths runs on the raw RGBA pixels rather than through a browser filter, so the same file and settings give the same pixels in every browser, and the result can be tested exactly. The alpha channel is never written: a transparent PNG stays transparent, and the transparent corners of a logo do not turn into solid brown. The image is decoded by your browser (turning a phone photo upright with its EXIF orientation), drawn onto a canvas at full size, rewritten channel by channel, and offered back as a download.

"Same as input" keeps PNG as PNG, JPG as JPG and WebP as WebP. GIF, BMP and AVIF are saved as PNG, because browsers can read those formats but cannot reliably write them from a canvas, and an animated file keeps only its first frame. You can also pick PNG, JPG or WebP explicitly: PNG is lossless, so the toned pixels are saved exactly, while JPG and WebP are re-encoded at the quality you choose and are therefore no longer a pixel-exact copy. JPG cannot store transparency, so transparent areas are filled with the colour you pick.

One honest limit: a sepia tone here is a fixed colour matrix, not a simulation of a film stock. It cannot reproduce the colour shifts, the grain or the highlight roll-off of a real sepia print. If you want that look, tone it and then add grain in an editor — the two steps are not the same thing.

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. Your images stay on your device: the Network tab in your browser's developer tools shows no request carrying them.

1. The file's size is checked (50 MB) before it is read, and its first bytes confirm it is PNG, JPG, WebP, GIF, BMP or AVIF; the browser then decodes it upright. 2. The image is drawn onto a canvas at full size and its RGBA pixels are read. 3. For every pixel the three output channels are computed from the matrix: R' = 0.393·R + 0.769·G + 0.189·B, G' = 0.349·R + 0.686·G + 0.168·B, B' = 0.272·R + 0.534·G + 0.131·B. The matrix output is not clamped at this point — for a bright pixel the red and green channels legitimately run past 255. 4. Each channel is interpolated towards the matrix output by the intensity: result = original + (intensity ÷ 100) × (matrix output − original). At 0% nothing moves; at 100% the result is the matrix output itself. 5. The three channels are rounded to the nearest byte and clamped to 0–255. The clamp comes last, so a bright pixel does not saturate one channel early and pull the others with it. 6. The alpha byte is never written, so transparency is preserved. 7. The pixels are written back, the canvas is encoded as PNG, JPG or WebP, and the file is named like photo-sepia.jpg or logo-sepia.png.