Color Grading

Color Grading Overview

VideoBuff enables professional-level color grading directly in the browser. You can apply any of 16 color presets with a single click, or manually fine-tune parameters such as exposure, contrast, and color temperature.

Previews update in real time so you can see your adjustments instantly as you work. Color grading is applied non-destructively, meaning you can reset to the original footage at any time.

Color Presets

Presets are organized into four categories. The Cinematic category includes looks such as teal-and-orange and bleach bypass for a film-like appearance. The Vintage category offers nostalgic styles like retro film and sepia tone.

The Mood category provides atmosphere-focused presets such as cool blue and warm sunset. The Correction category contains presets for fixing exposure and white balance issues from the original shoot.

After applying a preset, you can still fine-tune individual parameters manually.

Basic Adjustments

Basic adjustment parameters include exposure (overall brightness), contrast (tonal range between light and dark), highlights (bright area adjustment), shadows (dark area adjustment), temperature (warm/cool balance), and tint (green/magenta balance).

Each parameter can be adjusted intuitively via sliders or precisely with numeric input. For example, if indoor footage looks yellowish, lower the temperature for a cooler correction; conversely, raise the temperature to warm up blue-tinted overcast footage.

Advanced Adjustments

Advanced adjustment parameters include vibrance, saturation, faded film effect, sharpness, vignette, and blur. Vibrance is an intelligent saturation adjustment that boosts less-saturated colors while leaving already-vivid colors unchanged.

The faded film effect lifts the black level to add a matte, film-like quality. Vignette darkens the edges of the frame to draw attention to the center subject, with adjustable amount and range.

By combining these parameters, you can create your own unique look.

Step-by-Step Color Grading

First, select the clip you want to color grade on the timeline. Then open the inspector panel and navigate to the Color section.

To use a preset, click your preferred option from the preset list; for manual adjustment, operate the individual sliders. Applying a preset and then making fine-tuning adjustments helps you get closer to your ideal look.

Once you are satisfied, you can copy and paste the same settings to other clips to maintain a consistent look across your entire project.

Technical Note: Color Grading Implementation

Basic color parameters (brightness, contrast, saturation, etc.) use CSS filters to achieve real-time preview. Advanced color manipulation uses SVG feColorMatrix filters for more precise color transformations.

During export, the equivalent filter pipeline is reproduced on an OffscreenCanvas to guarantee output that matches the preview. CSS filter previewing benefits from GPU acceleration, maintaining smooth playback even with complex adjustments.