PNG Brightness, Contrast & Saturation
Adjust brightness, contrast and saturation on any PNG. Three independent sliders, transparency preserved, instant preview. Useful for quick fixes, web optimisation and creative grading.
Brightness, contrast and saturation — what each one changes
These three sliders together cover most of the colour-grading you'd ever need to do quickly. They're the same controls Photoshop, Lightroom and every image editor since the 1980s have offered. Knowing what each one does separately makes them much easier to combine effectively.
Brightness
Brightness shifts every pixel's lightness uniformly. At 100% (default) the image is unchanged. Below 100% every pixel gets darker; above 100% every pixel gets lighter. The shift is linear, which means very dark and very bright areas move at the same rate as midtones. If you push brightness above ~140%, highlights start to clip to pure white (the brightest pixels can't go any brighter so detail there is lost); below 60%, shadows start crushing to black.
Contrast
Contrast stretches or compresses the gap between dark and light pixels. At 100% the image is unchanged. Above 100% dark pixels get darker and light pixels get lighter — punchier image, but you can lose detail at both extremes. Below 100% the image becomes flatter and grayer; at 0% every pixel converges on mid-gray.
High-contrast images feel "snappy" and modern; low-contrast images feel "moody" or "filmic". Editorial photography often uses slightly elevated contrast (105–120%) for impact; film-style colour grading often pulls contrast slightly down (85–95%) for a softer feel.
Saturation
Saturation controls how vivid the colours are. At 100% the image is unchanged. At 0%, the image is fully grayscale (matches the PNG Grayscale tool's luminance mode). Above 100% colours get more vivid; pushed too far (180%+) you'll see ugly clipping where bright reds, greens or blues become unnaturally pure.
Most "Instagram filter" looks are achieved by tasteful adjustments to these three values — slight contrast lift, slight saturation tweak, slight brightness shift.
How this tool works
The browser uses its built-in CSS filter pipeline (ctx.filter = 'brightness(N) contrast(N) saturate(N)') to apply all three adjustments in a single GPU pass. The result matches what you'd get with the equivalent CSS filter applied live in a browser, so it's a useful previewer for "what would my logo look like as a desaturated/brighter image on this page?" workflows.
The output is a fresh PNG with the adjustments baked in. The original file is never modified; you can re-process from scratch whenever you want.
Common adjustments and what they feel like
| Goal | Brightness | Contrast | Saturation |
|---|---|---|---|
| Punchy "Instagram" pop | 105% | 115% | 120% |
| Soft film look | 105% | 92% | 88% |
| Faded vintage | 110% | 80% | 70% |
| Dramatic editorial | 95% | 130% | 105% |
| Brighten dark photo | 120% | 105% | 100% |
| Reduce blown-out highlights | 85% | 110% | 100% |
| Black and white | 100% | 100% | 0% |
| Behind-text overlay (darken) | 60% | 90% | 90% |
How brightness, contrast and saturation interact
Order matters. The tool applies brightness → contrast → saturation. Increasing brightness first then boosting contrast amplifies that brightness shift; doing contrast first and then brightness has a subtly different effect. For most everyday adjustments the difference is small, but at extreme settings (200% on everything) the results can vary significantly.
Practical rule: nudge in small steps. Aim for ±10–15% from the default for natural-looking adjustments. Anything above ±30% starts to look obviously edited. Anything above ±50% is a deliberate stylistic choice, not a correction.
Practical scenarios
- Recovering an underexposed phone photo — push brightness to 115–125%, lift contrast slightly (105–110%) to restore punch.
- Toning down a too-bright product shot — drop brightness to 90% and bump contrast to 110% to recover some "shape" in highlights.
- Preparing a hero image for white-text overlay — drop brightness to 60–70%, pull saturation to 80%. The text will pop.
- Faking a "film" look — small lifts in brightness (105%) and small drops in contrast (90%) and saturation (85%) get you most of the way.
- Quick logo desaturation for a watermark — saturation 0%, brightness 110%, contrast 95%. Combine with low opacity in CSS.
FAQs
Will transparency be preserved?
Yes — the alpha channel is not touched.
Why does my image look posterised at extreme settings?
Pushing contrast or brightness very high collapses many source values onto fewer output values, which creates visible bands. Pull the slider back toward 100%.
Can I get HSL or per-channel control?
This tool covers the universal three. For RGB-curves or HSL, use a full image editor like Photoshop or GIMP.
Is anything uploaded?
No. Everything runs in your browser.
Can I undo a previous edit?
Reset returns the sliders to 100%. To go back further (e.g. another edit you'd applied earlier), re-import the original PNG.
Does this preserve image quality?
Yes for moderate adjustments. Extreme contrast or brightness shifts cause clipping (loss of detail at the extremes) which can't be recovered.