Brightness and contrast adjuster
Brighten or darken any photo and fine-tune its contrast with two live sliders. This is a quick way to rescue an underexposed snapshot, flatten a high-contrast scan, or add punch to a dull product photo — all without installing editing software and without your image leaving your device.
How it works
The image is loaded into a <canvas> and every pixel is transformed channel by channel. Both sliders run from −100 to +100. Brightness is mapped to an offset b = (brightness / 100) × 255, and contrast to c = (contrast / 100) × 255. A standard contrast factor is computed:
F = (259 × (c + 255)) / (255 × (259 − c))
Each colour channel then becomes F × (value + b − 128) + 128, clamped to the 0-255 range. Subtracting 128 first means contrast scales around mid-grey, so lights and darks spread apart symmetrically — bright areas get brighter, dark areas get darker, without shifting the overall tonal centre.
What the sliders do
Brightness shifts the overall exposure up or down. Positive values add the same offset to every channel, making the whole image lighter. Negative values subtract it, darkening shadows and midtones alike. At +100 or −100, large areas clip to pure white or black.
Contrast stretches or compresses the tonal range around mid-grey. A positive value pushes highlights toward white and shadows toward black simultaneously, increasing separation and perceived sharpness. A negative value does the opposite — everything converges toward a flat grey, which can reduce harshness in overlit scans.
Worked examples
| Setting | Effect |
|---|---|
| Brightness +40, Contrast 0 | Each channel gains 102 (40% of 255) — a noticeably lighter image without affecting tonal spread |
| Brightness 0, Contrast +50 | F ≈ 2.0; darks get darker, lights get lighter — stronger punch |
| Brightness −20, Contrast −30 | Slightly darker and flatter; useful for taming a very harsh, high-contrast scan |
| Brightness +20, Contrast +30 | Classic “pop” adjustment — lifts exposure and increases snap |
Practical use cases
- Underexposed photos — a small positive brightness with slight positive contrast recovers detail in muddy shadows.
- Flat product shots — contrast +30 to +50 adds visual separation without hue shifts.
- Scanned documents — a negative contrast (−20 to −40) softens heavy black printing that looks harsh on screen.
- Preparing for print — slightly negative brightness compensates for monitor screens being brighter than printed output.
The preview updates instantly and everything runs in your browser via the Canvas API, so your image is never uploaded. The output downloads as a lossless PNG.