{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Privacy:Browser only Output:{{ outputFormatLabel }} Adjustments:{{ adjustmentSummary }}
{{ summaryAnnouncement }}
Image color adjustment controls
Drop one image or browse from this device.
{{ sourceFile ? sourceFile.name : 'Drop image here' }}
{{ sourceMeta || 'PNG, JPEG, or WebP' }}

Ignored {{ ignoredFileCount }} extra {{ ignoredFileCount === 1 ? 'file' : 'files' }}. This tool processes one image at a time.

{{ signed(brightness) }}
Darken or brighten the whole image.
{{ signed(contrast) }}
Reduce or strengthen separation between light and dark tones.
{{ signed(saturation) }}
Mute or intensify all colors.
{{ signed(hue) }}°
Shift the overall color family without changing alpha.
{{ signed(warmth) }}
Move the image toward cooler blue or warmer red tones.
Restore all five color controls to neutral.
Choose the file type needed by the next editing or publishing step.
{{ quality }}%
Higher quality usually creates a larger file.

{{ workflowMessage }}

Letters, numbers, spaces, hyphens, and underscores; blank leaves the default name unchanged.
Image comparison Revision {{ outputRevision }} · {{ outputFormatLabel }} · {{ outputDimensions }} · {{ formatBytes(outputBlob.size) }}
Original
Original source preview
Adjusted
Adjusted image preview
{{ verificationMessage }} {{ resultData.clipping_rate.toFixed(1) }}% of RGB channels reached 0 or 255. Review highlights and shadows before downloading.
{{ chartExportStatus }}

The chart renderer is unavailable. The same channel evidence remains available in the ledger.

{{ tableExportStatus }}
SignalOriginalAdjustedChangeCopy
{{ row.label }}{{ row.original }}{{ row.adjusted }}{{ row.delta }}

Color correction changes the relationships among light, dark, and color channels without changing the subject of an image. A small brightness lift can recover a dim photo, lower saturation can calm distracting colors, and a modest warmth shift can make neutral scenes feel less blue. Strong settings can also erase highlight or shadow detail, create unnatural hues, or push several channels to pure black or white.

Five adjustments describe different parts of that work. Brightness scales every red, green, and blue value. Contrast moves those values away from or toward mid-gray. Saturation changes each channel's distance from the pixel's luminance, while hue rotation remaps color families around the color wheel. Visual warmth adds red and subtracts blue, or does the reverse for a cooler appearance.

Practical effects and common risks of image color adjustments
Adjustment Useful for Watch for
BrightnessCorrecting an image that is broadly too dark or too light.Lost detail when channels reach 0 or 255.
ContrastSeparating subjects from similar-toned backgrounds.Crushed shadows, harsh highlights, and amplified noise.
SaturationMuting dull color casts or strengthening restrained color.Unnatural skin, foliage, or product colors.
Hue rotationMoving the whole palette to a different color family.Brand colors and familiar objects becoming inaccurate.
Visual warmthBalancing an image that looks slightly too blue or red.Confusing a visual red-blue balance with a measured color temperature.

A screen preview is still an interpretation, not a color-managed proof. Display calibration, browser color handling, ambient light, and the chosen export format can all affect what another viewer sees. Keep an untouched original and judge important work on the display and output medium where it will be used.

How to Use This Tool:

Start from one source image, make restrained changes, and apply them before judging the encoded result.

  1. Drop or browse for one PNG, JPEG, or WebP image. The file must be no larger than 20 MB, 8,192 pixels on either side, and 16 megapixels in total.
  2. Set Brightness, Contrast, Saturation, Hue rotation, and Visual warmth. Zero leaves each adjustment neutral; Reset adjustments returns all five to zero.
  3. Choose Output format. Use PNG or WebP when transparency must remain; JPEG replaces transparent areas with white. Set Encoding quality for JPEG or WebP when file size and compression quality matter.
  4. Select Apply adjustments. If the file extension and actual file signature disagree, the image is empty, or its dimensions exceed the limits, correct the source before trying again.
  5. Inspect the adjusted image and the verification message, then compare the Tone distribution and Channel ledger when a strong edit may have clipped channels or shifted overall luminance.

Interpreting Results:

The adjusted image is the result to judge first. Confirm that its dimensions match the source and that transparency was preserved or flattened as intended. If the settings change afterward, apply them again before downloading so the preview and encoded file describe the same edit.

  • Clipping rate is the percentage of red, green, and blue channels that fell outside the usable range before being limited to 0–255. A rising value warns that tonal or color detail is being discarded.
  • Tone distribution compares original and adjusted luminance across sixteen 8-bit ranges. A pile-up near 0 suggests deeper shadows; a pile-up near 255 suggests brighter highlights.
  • Channel ledger compares average red, green, blue, and luminance values. These averages reveal a broad shift but cannot show whether a particular face, product, or small region still looks correct.

Technical Details:

Each pixel is decoded into normalized sRGB red, green, and blue channel values from 0 to 1. Adjustments run in a fixed order: brightness, contrast, saturation, hue rotation, then visual warmth. Order matters because every stage receives the previous stage's output. Alpha is carried through unchanged until export.

Formula Core:

Brightness scales a channel, contrast moves it around the 0.5 midpoint, and saturation moves it toward or away from luminance.

xb=x×1+b100 xc=xb-0.5×1+c100+0.5 L=0.2126R+0.7152G+0.0722B xs=L+xc-L×1+s100

Here, x is one normalized color channel, b is brightness, c is contrast, s is saturation, and L is sRGB luminance. At −100 saturation, every channel becomes the same luminance value and the pixel is grayscale. Hue rotation uses the W3C sRGB hue matrix with an angle from −180° to +180°.

Transformation Core:

Ordered image color transformation stages
StageRangeTransformation
Brightness−100 to +100Multiplies all three color channels by 1 + value / 100.
Contrast−100 to +100Scales distance from normalized mid-gray, 0.5.
Saturation−100 to +100Scales distance from weighted luminance.
Hue rotation−180° to +180°Applies the sRGB hue-rotation matrix.
Visual warmth−100 to +100Adds up to 0.12 to red and subtracts the same amount from blue; negative values reverse the shift.
Output channels0 to 255Limits each channel to the valid range and rounds once to the nearest 8-bit integer.

Visual warmth is a relative red-blue adjustment, not a Kelvin conversion or white-balance measurement. JPEG encoding places the adjusted image over white because JPEG has no alpha channel; PNG and WebP retain the adjusted alpha values.

Accuracy and Privacy Notes:

The image is decoded, adjusted, and encoded in the browser. It is not uploaded. Browser support still affects whether a requested encoding succeeds, and lossy JPEG or WebP output may introduce compression artifacts that do not appear in the unencoded canvas preview.

  • Channel averages and luminance bins summarize the whole image; they do not measure local color accuracy.
  • Clipping is counted before limiting channels, but a low clipping rate does not guarantee a natural-looking edit.
  • Keep the original file because each lossy re-encode can discard more detail.

References: