How grayscale, sepia, and contrast filters work
The pixel math behind brightness, contrast, saturation, grayscale, sepia, and invert, and why order and clamping change the final look.
An image is just numbers
A raster image is a grid of pixels, and each pixel holds four values: red, green, blue, and alpha, every one from 0 to 255. A filter is a rule that reads those numbers and writes new ones, applied identically to every pixel. Because the math is simple arithmetic, a browser can run it on millions of pixels in a fraction of a second. This tool keeps alpha untouched and only rewrites the three color channels, which is why transparency survives every filter.
Brightness and contrast
Brightness here is additive: the slider value over 100 times 255 is added to each channel, so +40 adds 102 to red, green, and blue alike, then the result is clamped back into range. Contrast instead stretches values away from the midpoint of 128, using a factor derived from the slider so that lights get lighter and darks get darker. Positive contrast widens the gap between tones, while negative contrast pulls everything toward mid gray. Both effects can clip once channels hit 0 or 255, which is where shadow or highlight detail disappears.
Saturation and grayscale share a pivot
Saturation and grayscale both revolve around luma, the perceived brightness of a pixel computed with the Rec. 601 weights of 0.299 red, 0.587 green, and 0.114 blue. Grayscale sets all three channels to that luma value, collapsing color while keeping tonal structure, so a vivid red and a dull red map to different grays by brightness. Saturation moves each channel toward or away from the luma value by a factor of one plus the slider over 100. At -100 that factor is zero, which lands every channel on luma and produces the same result as grayscale.
Sepia and invert as fixed transforms
Sepia is a fixed 3 by 3 color matrix that mixes the original channels into warm brown tones, for example turning a white pixel into (255, 255, 239) after clamping. It does not read a slider, it just remaps colors. Invert is even simpler: each channel becomes 255 minus itself, so (30, 90, 200) flips to (225, 165, 55), producing a photographic negative. Because these run after the tone and color steps, stacking a slider adjustment before them changes the input they receive, which is why the same two effects in a different order can look quite different.