Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. Your files are processed in your browser and are never uploaded - no accounts required. A few network utilities (like What's My IP and Currency Converter) call public APIs to do their job and say so on their pages.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Image Processing
  3. Image Color Grader
Add to favorites

Image Color Grader

A tone curve drawn with its level count and clipping reported, per-range gains in stops of light whose three weights sum to exactly one, and a white balance that is a Bradford adaptation on a published locus. The neutral setting is proved to change nothing.

Edits stay in your browserMore image processingJump to full guide

Initializing in your browser…

You might also like

Image Color Palette Extractor

Extract a palette whose every colour is one the image actually contains, with the share of the picture each one covers. Median cut, k-means in CIE Lab or plain frequency, each named.

Image Batch Processor

Process many images at once with one operation, with every output decoded again and checked against what was asked for, and the whole batch downloaded as one ZIP.

Image to Base64

Turn an image into a data URL whose payload is decoded again and compared byte for byte with the file, with the media type taken from the file's own signature rather than its extension and the size cost of embedding stated in full.

Image Color Grader: a worked example

A 240 by 200 test chart with a full black-to-white ramp, opened with every control at its identity and nothing asked for.

Input

grade-chart.png · 48,000 pixels · 264 distinct colours
What Image Color Grader produces

What the neutral setting produced

                     before      after
pixels changed       44,680      0
share of the image   93.1%       0.0%
distinct colours     12          264
contrast factor      129.5       n/a (identity)

at contrast 1.2 the old factor was -12.1,
so asking for more contrast INVERTED the picture

The old contrast used the correction-factor formula, which expects a value from -255 to +255, and was handed a multiplier around 1.0. At the neutral setting that gives a factor of 129.5, which thresholds every channel at 128, so a continuous ramp came out as twelve colours before a single slider was touched. A grader whose neutral setting alters the picture has no neutral setting, and this one now reports the count.

About the Image Color Grader

A tone curve, per-range gains in stops of light, and a white balance that is a real chromatic adaptation on a published locus. The neutral setting is proved to change nothing, the curve is drawn with its level count and clipping reported, and everything that has no published definition prints its own arithmetic.

How to use

  1. 1Upload an image
  2. 2Set the black point, white point and gamma on the Tone tab, watching the drawn curve and the surviving level count
  3. 3Adjust the shadows, midtones and highlights in stops; the three range weights always sum to one
  4. 4On the Colour tab set the temperature in kelvin and the tint, then saturation and vibrance
  5. 5Use Compare to check against the original, then download the PNG

Where this helps

  • Correcting a colour cast

    A real white balance in kelvin, adapted with the Bradford transform, rather than a constant added to one channel.

  • Recovering shadow detail

    A shadow gain in stops that leaves the midtones and highlights where they were, because the three weights sum to one.

  • A consistent look across a set

    Every setting is a number you can write down and type in again, and the presets print theirs.

  • Seeing what a grade costs

    The level count under the curve says how many of the 256 tones survive, which is the posterisation you would otherwise only find later.

Key features

  • A neutral setting that changes not one pixel, and reports the count so you can see it
  • A tone curve drawn on the page, with monotonicity, surviving level count and clipping at both ends reported
  • Per-range gains in stops of LIGHT, with what a stop does to byte 128 shown both ways (176 or a clipped 255)
  • Three range weights that sum to exactly one at every level, in three named mask shapes, drawn and with their formulas printed
  • A white balance that is a Bradford chromatic adaptation between two points on a published locus, in linear light
  • The CIE daylight series above 4000 K and the Planckian locus below it, with the locus and chromaticity named
  • Saturation from the Filter Effects Module 1 matrix, agreeing with the browser's own saturate() to one of 255
  • Vibrance weighted by the pixel's own saturation, with the weighting written out
  • Split toning for the shadows and the highlights, through the same range masks
  • Presets that state plainly they have no published recipe, and print the settings they apply

Tips & best practices

  • Start with the black and white points, then gamma, then the range gains. The curve is drawn as you go, and the level count under it tells you when you are throwing tones away.
  • Leave the range gains in linear light unless you have a reason not to. A stop is a doubling of light by definition, and on the stored byte the same +1 EV clips mid grey straight to white.
  • Temperature works the way a raw developer's does: it is the light the picture is assumed to have been taken under, so a LOWER number means a warmer assumed light and a cooler correction.
  • If a colour cast will not come out with temperature alone, it is usually green or magenta, which is what the tint axis is for.
  • For plain brightness, contrast, saturation or hue on their own, the Image Filters tool applies the published matrices and checks each against the browser.

Examples

  • Lifting shadows without flattening the picture

    Raise the shadow gain by half a stop and leave the midtones and highlights alone. The masks sum to one, so nothing else moves, and the drawn curve shows exactly where the lift ends.

  • Correcting tungsten light

    Set the temperature to about 3200 K. The panel reports the Planckian locus, the chromaticity and channel gains of 0.357, 1.119 and 2.698, which is the Bradford adaptation from that light to neutral.

How it works

A grader and a filter set overlap, so it is worth saying what this one is FOR. Brightness, contrast, saturation and hue rotation all have exact published definitions in Filter Effects Module 1, every browser implements them, and the Image Filters tool applies them and checks each against the browser to zero of 255. What that specification does not define, and what a grader is actually for, is a tone CURVE and PER-RANGE control: moving the shadows without moving the highlights, setting a black and a white point, and tinting the two ends differently. That is what this page does.

The first thing it now does is nothing. With every control at its identity, not one of the 48,000 pixels of the test chart changes, and the page reports that count. The shipped tool changed 44,680 of them, 93.1 percent, with nothing asked for. Its contrast used the well-known correction-factor formula, which expects a value from -255 to +255, and fed it a multiplier around 1.0: at the neutral setting of 1.0 the factor came out as 129.5, so every channel was thresholded at 128 into 0 or 255 and a chart with a full black-to-white ramp came out holding twelve distinct colours. Above 1.015 the factor went NEGATIVE, so asking for more contrast inverted the picture.

The tone controls are a real curve, built as a 256-entry lookup table that is DRAWN on the page. Three properties of it are reported rather than assumed: whether it is monotonic (a curve that decreases anywhere is not a tone curve), how many of the 256 input levels survive as distinct outputs, which is exactly the posterisation a strong curve causes, and how many are clipped at each end. A black point of 60 reports 61 levels clipped and 170 of 256 surviving.

The per-range gains are given in STOPS, and a stop is a doubling of light. One stop of midtone gain takes byte 128 to byte 176, not to the clipped 255 that multiplying the stored byte gives, and both numbers are on the page with a switch between them. The three range weights (shadow, midtone, highlight) sum to EXACTLY ONE at every level, in all three mask shapes offered, so no tone is adjusted twice and none is missed; the masks are drawn and their arithmetic is printed. The shipped pair summed to 0.5 at mid grey, which is half the picture unaccounted for.

The white balance is a real chromatic adaptation rather than adding a constant to red and subtracting it from blue. A temperature in kelvin becomes a chromaticity on a published locus, the CIE daylight series at and above 4000 K and the Planckian (black body) locus below it, and the picture is adapted from there to the neutral white point by the Bradford transform, in linear light. The locus, the chromaticity and the three channel gains are all shown. Because the daylight locus passes through D65, 6504 K with no tint is an EXACT identity, which is the property the old arithmetic could not have at any setting.

Saturation is the Filter Effects matrix, and the page agrees with the browser's own `saturate()` to at most one of 255 across eighteen ColorChecker patches. Vibrance is weighted by one minus the pixel's own saturation, so a neutral grey gets the full amount and a fully saturated colour gets none; measured on the chart, a grey area moves 0 levels, a saturated bar moves 0, and a ColorChecker patch moves 16. The shipped formula read only the slider and never the pixel, so it was a second saturation control under another name.

The presets are labelled for what they are. A named look has no published recipe and nothing to check one against, so the page says so and prints the exact settings each one applies rather than implying it reproduces a particular film or camera profile.

Frequently asked questions

How do I know the neutral setting really does nothing?

The page compares the output with the input and reports the count. At the identity it reads zero of 48,000 pixels changed on the test chart, and the downloaded file is byte-identical when checked with an independent decoder. The tool this replaced changed 93.1 percent of them at the same setting.

What is the difference between this and the Image Filters tool?

Filters applies the seven transforms Filter Effects Module 1 defines, each checked against the browser. This applies a tone curve and per-range control, which that specification does not cover: a black and white point, gamma, separate shadow, midtone and highlight gains, split toning, and a white balance in kelvin.

Why is temperature in kelvin rather than a warm-to-cool slider?

Because kelvin means something. A temperature becomes a chromaticity on the CIE daylight locus, or the black body locus below 4000 K, and the picture is adapted from there to neutral by the Bradford transform in linear light. The page shows the locus, the chromaticity and the resulting channel gains, so the correction is checkable rather than a feel.

Why does a lower temperature make the picture cooler?

Because the number is the light the picture was taken under, not the look you want. Telling the tool the light was 3200 K tungsten means the correction has to remove that warmth. It is the convention every raw developer uses.

What does "the masks sum to one" mean?

That at every brightness level the shadow, midtone and highlight weights add to exactly 1.000. It is what stops a tone being adjusted twice by two controls, or missed by both. The pair the old tool used added to 0.5 at mid grey.

Are the presets real film stocks?

No, and the page says so where they are. A named look has no published definition and nothing to check one against, so each preset simply prints the settings it applies. The tone curve and the white balance, which do have definitions, are checked against them.

Related tools and how they differ

  • Image Filters: The seven transforms Filter Effects Module 1 defines, each checked against the browser to zero of 255.
  • Image Histogram: See where the tones sit before deciding what to move.

Private by design

Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.