Color Correction · Remotion Best Practices · remotion-dev/skills · Skills Docs

Color Correction · Remotion Best Practices · remotion-dev/skills · Skills Docs

Control	Meaning and range	Neutral value
`exposure`	Stops, from `-5` to `5`; positive values brighten	`0`
`temperature`	From `-1` (cooler) to `1` (warmer)	`0`
`tint`	From `-1` (greener) to `1` (more magenta)	`0`
`shadows`, `highlights`	From `-1` to `1`; negative values darken, positive values lift the region	`0`
`blacks`, `whites`	From `-1` to `1`; target narrower regions near black and white	`0`
`contrast`	Non-negative multiplier around `pivot` (`0` to `1`, default `0.5`)	`1`
`saturation`	Non-negative multiplier; `0` is grayscale	`1`
`vibrance`	From `-1` to `1`; positive values emphasize muted colors	`0`

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

export const CorrectedVideo = () => {
  return (
    <Video
      src={staticFile('footage.mp4')}
      effects={[
        colorCorrection({
          exposure: 0.25,
          temperature: 0.1,
          tint: -0.03,
          shadows: 0.15,
          highlights: -0.1,
          contrast: 1.1,
          saturation: 1.05,
          vibrance: 0.15,
        }),
      ]}
    />
  );
};

import {curves} from '@remotion/effects/curves';
import {levels} from '@remotion/effects/levels';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const ToneAdjustedVideo = () => {
  return (
    <Video
      src={staticFile('footage.mp4')}
      effects={[
        levels({
          blackPoint: 0.03,
          whitePoint: 0.95,
          gamma: 1.1,
          outputBlack: 0.02,
          outputWhite: 0.98,
        }),
        curves({
          channel: 'red',
          points: [[0, 0], [0.5, 0.55], [1, 1]],
          amount: 0.8,
        }),
      ]}
    />
  );
};

import {colorCorrection} from '@remotion/effects/color-correction';
import {lut} from '@remotion/effects/lut';
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

export const GradedVideo = () => {
  return (
    <Video
      src={staticFile('footage.mp4')}
      effects={[
        colorCorrection({exposure: 0.25, contrast: 1.1}),
        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`,
        }),
      ]}
    />
  );
};