interpolateColors()

Available from v2.0.3

Allows you to map a range of values to colors using a concise syntax.

Reference​

Params​

1. The input value.
2. The range of values that you expect the input to assume.
3. The range of output colors that you want the input to map to.

Returns​

interpolateColors() returns a rgba color string. eg: rgba(255, 100, 12, 1)

Example: interpolate colors​

In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red. At frame 20, we want the color to be yellow.

Using the following snippet, we can calculate the current color for any frame:

tsx
import { interpolateColors, useCurrentFrame } from"remotion";
constframe=useCurrentFrame() /10;
constcolor=interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)
constcolor2=interpolateColors(frame, [0, 20], ["#ff0000", "#ffff00"]); // rgba(255, 128, 0, 1)

Example: interpolate rgb or rgba colors​

In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red (rgb(255, 0, 0)). At frame 20, we want the color to be yellow (rgba(255, 255, 0)).

Using the following snippet, we can calculate the current color for any frame:

tsx
import { interpolateColors, useCurrentFrame } from"remotion";
constframe=useCurrentFrame(); // 10
// RGB colors
constcolor=interpolateColors(
 frame,
 [0, 20],
 ["rgb(255, 0, 0)", "rgb(255, 255, 0)"]
); // rgba(255, 128, 0, 1)
// RGBA colors
constcolor2=interpolateColors(
 frame,
 [0, 20],
 ["rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 0)"]
); // rgba(255, 128, 0, 0.5)

Example: interpolate hsl or hsla colors​

In this example, we are interpolating colors from red to yellow. At frame 0 (the start of the video), we want the color to be red (hsl(0, 100%, 50%)). At frame 20, we want the color to be yellow (hsl(60, 100%, 50%)).

Using the following snippet, we can calculate the current color for any frame:

ts
import { useCurrentFrame, interpolateColors } from"remotion";
constframe=useCurrentFrame(); // 10
//hsl example
constcolor=interpolateColors(
 frame,
 [0, 20],
 ["hsl(0, 100%, 50%)", "hsl(60, 100%, 50%)"]
); // rgba(255, 128, 0, 1)
//hsla example
constcolor2=interpolateColors(
 frame,
 [0, 20],
 ["hsla(0, 100%, 50%, 1)", "hsla(60, 100%, 50%, 1)"]
); // rgba(255, 128, 0, 1)

Example: interpolate color names​

Interpolating CSS color names is also supported.

ts
import { useCurrentFrame, interpolateColors } from"remotion";
constframe=useCurrentFrame(); // 10
constcolor=interpolateColors(frame, [0, 20], ["red", "yellow"]); // rgba(255, 128, 0, 1)

See also​

• Source code for this function
• interpolate()