🌗 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.

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.

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%)

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.

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.

Canvas filter

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

Clamping

Forcing a calculated pixel value back into the valid 0 to 255 range so it cannot go below black or above white.

PNG

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

Frequently asked questions