🌗 Image Brightness and Contrast Adjuster

What is the Image Brightness and Contrast?

Brightness and contrast are the two most common adjustments in any photo edit. Brightness shifts every pixel toward lighter or darker, so the whole image gets uniformly more or less light. Contrast changes the gap between the light and dark parts: more contrast pushes shadows darker and highlights lighter for a punchier look, while less contrast pulls everything toward a flat, grey middle. Used together they fix the two things people most often want to change about a photo, that it looks too dim, or too washed out.

Under the hood this tool uses the browser's own canvas filter. Your image is drawn onto an HTML canvas, and before drawing it sets ctx.filter to brightness(x%) contrast(y%). At 100% each filter leaves the image untouched, which is why both sliders start there. A brightness of 150% multiplies each pixel's value by 1.5, and a contrast of 150% stretches values away from the mid-grey point of 50%. Values above 100% intensify the effect and values below 100% reduce it, with 0% giving either a fully black image (brightness) or a flat grey (contrast).

Because the work happens on a canvas in your browser, the tool is fully private and instant: there is no upload, no waiting, and no size limit beyond what your device can hold in memory. The output is re-encoded as a PNG, a lossless format, so repeated small adjustments do not degrade the image the way re-saving a JPEG would. If you need a smaller file afterwards you can convert the PNG to JPEG or WEBP with a separate tool.

Brightness and contrast are not the only tools photographers use to fix a photo's tonal range, and it helps to know how they differ from gamma and exposure. Brightness shifts every pixel by the same amount, so it can just as easily push pure black toward grey or blow highlights out to white. Gamma, sometimes labeled midtones in editing software, instead reshapes the curve so the middle tones move while the true black and white points stay fixed, which is why many editors treat it as the more natural fix for an underexposed shot. Exposure describes how much light a camera sensor actually captured at the moment the picture was taken, it cannot be restored after the fact. Brightness and contrast can only redistribute the tones that were captured, they cannot invent detail that was never recorded. A histogram, a graph of how many pixels sit at each brightness level from black to white, is the quickest way to see whether an image is underexposed (bunched to the left), overexposed (bunched to the right), or already well balanced before you touch either slider.

In practice, reach for brightness when the whole photo reads as too dark or too light overall, and reach for contrast when the exposure is roughly right but the image looks flat, hazy or grey. A common workflow is to nudge contrast up first to see if that alone restores punch, then apply a smaller brightness correction only if the image is still noticeably too dark or too light. Watch the extreme tones of the image as you drag either slider. Once shadows turn pure black or highlights turn pure white, that detail is clipped and gone for good, so it is usually worth pulling back a little rather than chasing the most dramatic-looking result.

When to use it

• Rescuing a photo that came out too dark by raising the brightness until detail in the shadows returns.
• Adding punch to a flat, hazy or washed-out picture by increasing the contrast.
• Toning down an over-bright or blown-out shot before posting or printing it.
• Preparing a clearer scan or document photo so text and lines stand out more sharply.
• Adjusting a scanned receipt or old document so faint, grey text becomes easy to read again.
• Making product photos for an online listing look consistent, well-lit and professional.

How to use the Image Brightness and Contrast

1. Click "Choose an image" and pick a photo from your device.
2. Drag the brightness slider left to darken or right to brighten the image.
3. Drag the contrast slider to flatten (left) or boost (right) the difference between light and dark.
4. Watch the live preview update, then click "Download PNG" to save the adjusted image.
5. Use "Reset sliders" to return both to 100%, or "Clear" to start over with a new image.

Formula & method

Worked examples

What the slider values do (both default to 100%)

Brightness vs. contrast vs. gamma vs. exposure

Quick fixes for common photo problems

Common mistakes to avoid

• Pushing both sliders to the extreme. Very high brightness or contrast clips pixels to pure white or black and permanently loses detail in those areas. Make smaller moves and stop as soon as the image looks right.
• Confusing brightness with contrast. Brightness lifts or lowers the whole image evenly. Contrast widens or narrows the gap between lights and darks. If a photo looks dull but is not too dark, reach for contrast, not brightness.
• Expecting it to recover blown-out areas. If parts of a photo are already pure white or pure black, no slider can bring back detail that was never captured. Brightness and contrast redistribute existing tones, they do not invent new ones.
• Re-editing a JPEG many times elsewhere. This tool outputs lossless PNG, but if you keep saving as JPEG between edits the image degrades each time. Do your adjustments in one pass, then export once.
• Mixing this up with your monitor or TV brightness buttons. This tool changes the actual pixel values stored in the image file. It does not touch your screen, monitor or TV display settings, those are controlled separately by your device and affect how every image looks, not just this one.
• Reaching for brightness when the midtones are the real problem. Raising brightness shifts the whole tonal range, including pixels that are already pure black or pure white. If only the middle tones look off, a dedicated gamma or midtone tool preserves the black and white points better than a blanket brightness change.

Glossary

Brightness

How light or dark the overall image is. Raising it shifts every pixel toward white, lowering it toward black.

Contrast

The difference between the lightest and darkest parts of an image. More contrast makes that gap wider and punchier.

Gamma

A midtone adjustment that reshapes the tonal curve so the middle values move while pure black and pure white stay fixed, often used instead of brightness for a more natural fix.

Histogram

A graph showing how many pixels in an image fall at each brightness level from black to white, used to judge whether a photo is under or overexposed.

Exposure

How much light a photo captured at the moment it was taken. Brightness and contrast can only redistribute those captured tones, not restore light that was never recorded.

Canvas filter

A built-in browser feature (ctx.filter) that applies effects like brightness() and contrast() when drawing an image to a canvas.

Clipping

When pixel values are pushed past 0 or 255 and forced to pure black or pure white, permanently losing the detail that was there.

PNG

A lossless image format, meaning it stores the picture exactly without throwing away detail to save space.

Frequently asked questions