Color correction

Color correction in Remotion is implemented using effects.

`colorCorrection()` effect

Use the colorCorrection() effect to combine common adjustments in one effect.

Show code

MyComp.tsx
import {colorCorrection} from '@remotion/effects/color-correction';
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        colorCorrection({
          exposure: 0.25,
          contrast: 1.1,
          temperature: 0.1,
          vibrance: 0.2,
        }),
      ]}
    />
  );
};

Individual effects such as brightness(), contrast(), and saturation() are also available.

`levels()` effect

Use levels() to set the darkest and brightest input values and adjust midtone brightness with gamma. This is useful for expanding the tonal range of a washed-out image.

Show code

MyComp.tsx
import {levels} from '@remotion/effects/levels';
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        levels({blackPoint: 0.05, whitePoint: 0.95, gamma: 1.1}),
      ]}
    />
  );
};

`curves()` effectv4.0.537

Use curves() to adjust brightness and contrast with more control over shadows, midtones, and highlights.

The left side of the graph controls darker areas, and the right side controls brighter areas. Add a point and drag it up to brighten those areas, or down to darken them.

Show code

This S-shaped curve darkens shadows and brightens highlights. The second effect lifts blue in the shadows:

MyComp.tsx
import {curves} from '@remotion/effects/curves';
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        curves({
          points: [[0, 0], [0.25, 0.12], [0.75, 0.88], [1, 1]],
          amount: 0.75,
        }),
        curves({channel: 'blue', points: [[0, 0.05], [1, 1]]}),
      ]}
    />
  );
};

`lut()` effect

Use lut() to apply a ready-made color grade from a .cube file, also known as a look-up table (LUT).

In Studio, drag a .cube file from your computer or the Assets panel onto a video in the canvas or timeline.

Show code

Pass the file contents as a string:

MyComp.tsx
import {lut} from '@remotion/effects/lut';
import {Video} from '@remotion/media';

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        lut({
          content: `
            TITLE "Warm"
            LUT_3D_SIZE 2
            0 0 0
            1 0.1 0
            0 0.9 0.1
            1 0.9 0.1
            0 0.1 0.8
            1 0.2 0.7
            0 0.9 0.8
            1 0.9 0.8
          `,
        }),
      ]}
    />
  );
};

You can also preview .cube files in your public folder by clicking on them in the Assets panel.

Combining adjustments

Effects are applied in array order. Place colorCorrection() before lut() to make primary adjustments before applying the final grade.