ContextQMD
Back to Remotion

saturation()

packages/docs/docs/effects/saturation.mdx

4.0.4741.7 KB
Original Source

saturation()<AvailableFrom v="4.0.466" />

Part of the @remotion/effects package.

A saturation effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it when you want to scale color intensity without overlaying a new color.

Preview

<EffectsDemo type="effects-saturation" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {saturation} from '@remotion/effects/saturation';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[saturation({amount: 1.5})]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties. You can also call saturation() without arguments.

amount?

Saturation multiplier. 0 makes the layer grayscale, 1 leaves colors unchanged, and values above 1 increase color intensity. Defaults to 1.

disabled?

When true, the effect is skipped. Defaults to false.

Difference to tint()

saturation() scales the source colors' chroma. tint() blends a new color over the source.

Use saturation() for color correction and tint() for a color overlay.

See also