Video Color Grader

Why Do This in Your Browser?

Color grading lives at the intersection of art and math — and the math has been the same for thirty years. Lift, gamma, gain. Saturation. Hue rotation. Color temperature. The controls are well-defined and the math runs comfortably on a modern CPU. The reason 'color grading' implies a desktop app isn't the underlying math; it's the realtime preview that 4K timeline work demands.

For short social clips, a single graded preview frame plus an in-browser render is enough. The tool grades one frame on a canvas (up to 480 px wide) as you move the sliders, then runs the final pass through FFmpeg.wasm's color filters when you're happy with the look. The preview uses the same formulas as the render's eq, hue and colorchannelmixer filters: on our test stills it landed within 1 to 2.3 levels (out of 255) of desktop FFmpeg on average.

How It Works

Six controls, each a slider: exposure (adds up to ±0.5 to brightness), contrast (×0.5 to ×1.5), saturation (0 to ×2), hue rotation (−180° to +180°), gamma (0.5 to 1.5, a midtone shift) and temperature (up to ±15% on the red and blue channels). Each change updates the preview frame; drag the Frame slider to check another moment, or tick Show original to compare. When you're done, click Render and FFmpeg.wasm applies the same settings to the whole video at full resolution.

Six built-in presets cover common looks: Cinematic (slightly darker, more contrast, cooler), Vivid (boosted saturation), Moody (lowered exposure, cool tint), Warm Vintage (warmer, softer contrast, brighter midtones), Bleach Bypass (reduced saturation, high contrast) and Bright & Clean (a little brighter and softer). Presets are starting points; tweak from there. To grade a still photo instead of video — or to design a look on a frame and export it as a reusable .cube LUT with Cinematic Looks for use in a desktop editor. This tool does not load LUTs.

Tip: Grading is non-destructive at preview but bakes into the final render. To compare before/after on the full output, render a clip with no grading first as a reference.

Common Use Cases

What each preset does, measured

Every slider maps to a fixed FFmpeg filter value, and the export runs exactly that chain: eq=brightness=E/200:contrast=1+C/200:saturation=1+S/100:gamma=1+G/200, then hue=h=H (degrees), then colorchannelmixer=rr=1+0.15·T/100:bb=1−0.15·T/100. So Temperature is a red-against-blue gain, not a white balance in kelvin: +100 multiplies red by 1.15 and blue by 0.85.

To show what the presets actually do, each one was run with that chain through FFmpeg 6.1 (the same filter code the in-browser engine uses) on a 640×360 test frame at moderate saturation, like ordinary footage, and measured with FFmpeg's signalstats filter. Settings are Exposure / Contrast / Saturation / Gamma / Temperature; luma is on the 0–255 scale.

Two things stand out. First, Cinematic, Vivid and Moody each push about one pixel in six to pure black or pure white in at least one channel (the source had none), because the contrast boost stretches the extremes; if your shot already has bright skies or deep shadows, lower Contrast a few points after applying one of them. Second, saturation has headroom only where colours are not already at the edge of the gamut: on a fully saturated colour chart the same Vivid preset raised average saturation by just 1%, since most pixels were already clipped. Bleach Bypass is the exception that always works, because it removes saturation rather than adding it.

There is no LUT (.cube) import; for LUT-based looks or secondary corrections on one colour range, use a desktop grader such as DaVinci Resolve.

Frequently Asked Questions