Brightness and Contrast, Explained
After reading this you will know exactly what the brightness, contrast and saturation sliders do to each pixel, how to read a histogram to decide which one to move, and how to avoid the clipping that silently destroys detail.
What these adjustments actually do
A photo is a grid of pixels. Each pixel has three channels, red, green and blue, and each channel holds a number from 0 (no light) to 255 (full light). Brightness, contrast and saturation are three different arithmetic operations on those numbers.
Here is the hook. A photo shot in shade might have every pixel packed between 20 and 120 on the 0 to 255 scale. It looks dark and muddy because it never uses the top half of the range. Raising brightness adds a constant to every channel; raising contrast stretches the values apart. Do both and the picture suddenly uses the full range from near 0 to near 255, and it looks correct instead of dim.
This tool applies the adjustments with the browser's canvas filters, which use the same math as CSS filters. That means the numbers below are not an approximation of what happens. They are what happens.
When to use it, and when not
Reach for brightness and contrast when the problem is tonal: the image is too dark, too bright, too flat (low contrast, everything gray) or too harsh (high contrast, blacks crushed and highlights blown). These sliders fix all four cases.
Do not use them to fix a color cast. If a photo is too orange or too blue, brightness and contrast move all three channels together and cannot correct the balance between them. Saturation changes how vivid colors are but not which direction they lean. A true white-balance fix needs per-channel control, which this tool does not offer.
Every adjustment here is destructive once you export. The math clips any value that lands below 0 or above 255, and clipped detail cannot be recovered from the saved file. Keep your original.
The formula and the intuition
Take a single channel value v in the range 0 to 255. Convert the brightness setting to a factor b and the contrast setting to a factor c, where 1.0 means "no change", 0 means "off" and 2.0 means "double". The output value is:
Read it inside out. First b \cdot v scales brightness: a factor of 1.2 multiplies every value by 1.2, so a mid-gray 128 becomes 153.6. Then contrast works around the midpoint 128: subtract 128, multiply by c, add 128 back. Multiplying the distance from the middle is what pushes darks darker and lights lighter. Finally the result is clamped to the range 0 to 255.
Saturation is separate. It scales each pixel's distance from its own gray level. With a saturation factor s the gray value is the luminance L = 0.2126 R + 0.7152 G + 0.0722 B, and each channel becomes L + s \cdot (v - L). At s = 0 every channel equals L, which is exactly grayscale.
A worked example
Brightening a shaded pixel
Start from the tool defaults: brightness factor b = 1.2, contrast factor c = 1.3, saturation left at s = 1.0. Take a dark bluish pixel with R = 40, G = 60, B = 90.
- Apply brightness to red: 1.2 \times 40 = 48.
- Apply contrast around 128: 1.3 \times (48 - 128) + 128 = 1.3 \times (-80) + 128 = -104 + 128 = 24.
- Green: 1.2 \times 60 = 72, then 1.3 \times (72 - 128) + 128 = 1.3 \times (-56) + 128 = 55.2, round to
55. - Blue: 1.2 \times 90 = 108, then 1.3 \times (108 - 128) + 128 = 1.3 \times (-20) + 128 = 102.
The pixel moves from (40, 60, 90) to (24, 55, 102). Notice what contrast did: red and green, which were below the midpoint, got pushed down, while blue, closer to the middle, barely dropped. The pixel became more clearly blue because its darkest channel fell furthest. That is contrast increasing separation, applied to color.
If a bright photo goes gray and lifeless after you raise brightness, you pushed values toward the top and squashed them against 255. Lower brightness and raise contrast instead. Contrast reclaims the sense of depth that flat brightening removes.
How the transfer curve looks
The whole adjustment is one input-to-output curve applied to every channel. Plotting output against input makes the effect obvious: a straight diagonal is "no change", a steeper line through the middle is more contrast, and a line shifted upward is more brightness.
The clamping shown here is the practical limit. At b = 1.2, c = 1.3, any original value under about 32 collapses to pure black, and any value over about 208 collapses to pure white. Those pixels lose all detail.
Reading a histogram to decide what to move
A histogram counts how many pixels fall at each value from 0 to 255. It tells you which slider you need before you touch anything.
| What you see | Diagnosis | Move this |
|---|---|---|
| Bunched on the left | Too dark | Raise brightness |
| Bunched on the right | Too bright | Lower brightness |
| Narrow, bunched in the middle | Too flat | Raise contrast |
| Piled hard against 0 and 255 | Already clipped | Lower contrast |
| Colors look dull but tones fine | Weak saturation | Raise saturation |
The goal for most photos is a histogram that spans nearly the full width without large spikes stacked at the two ends. A spike at 0 means crushed shadows; a spike at 255 means blown highlights.
Try the sliders on a distribution
The clearest way to feel the difference between brightness and contrast is to watch a histogram move. Brightness slides the whole shape sideways. Contrast stretches or compresses it around the center.
Common mistakes
Overshooting brightness on an already bright image. If most pixels are above 180, a brightness factor of 1.3 pushes them past 255 and they merge into flat white. You cannot get that texture back.
Confusing contrast with sharpness. Contrast separates light from dark tones. It does nothing to edges. A blurry photo stays blurry no matter how high the contrast.
Cranking saturation to fix a dull photo. Saturation above about s = 1.6 turns skin orange and skies electric. If tones are dull, the fix is usually contrast, not saturation.
Editing a JPEG many times. Each JPEG save re-compresses and loses a little. If you plan several rounds, keep a PNG master and export JPEG only at the end.
Related tools
Once the tones are right, other jobs may follow. Clean grain before you push contrast, because contrast amplifies noise: the Image Noise Remover handles that. To hide sensitive areas use the Blur / Pixelate Redactor. Add a credit line with the Watermark Tool, straighten orientation with Rotate & Flip Image, size for a platform with the Social Media Image Cropper, add caption text with the Meme Generator, or drop a solid backdrop with the Background Remover.
Frequently asked questions
Why does my photo look worse after raising both brightness and contrast a lot?
The two multiply their effect. At b = 1.4 and c = 1.5 a value of 200 becomes 1.5 \times (280 - 128) + 128 = 356, which clamps to 255. Large chunks of the highlights turn to flat white. Back off one slider.
What is the difference between brightness and exposure?
In this tool brightness is a simple multiply, b \cdot v. Camera exposure is measured in stops, where one stop doubles the light. They move the image in the same direction but are not the same math, so a "one stop" change has no fixed slider value here.
Does grayscale just set saturation to zero?
Yes. The one-click grayscale is s = 0, which replaces every channel with the luminance L = 0.2126 R + 0.7152 G + 0.0722 B. Sepia does the same then tints the result warm.
Which format should I export?
PNG for a lossless copy you may edit again, JPEG or WebP for a smaller file to share. A typical photo saved as JPEG at quality 85 is roughly 5 to 10 times smaller than the PNG.
Are my images uploaded anywhere?
No. Every adjustment runs in your browser on your device. Nothing is sent to a server.
Related tools
Screenshot Annotator
Crop, then add arrows, boxes, blur, highlights and text to screenshots.
Social Media Image Cropper
Crop to Instagram, X, Facebook, YouTube & LinkedIn sizes.
Background Remover
Remove solid or near-solid backgrounds to transparency.
Blur / Pixelate Redactor
Blur or pixelate regions to hide sensitive content.
Image Noise Remover
Clean up grainy photos with median and smoothing filters.
Rotate & Flip Image
Rotate in 90° steps or mirror an image, losslessly sized.