remotion-dev/remotion · error · TypeError

inputRange (${inputRange.length} values provided) and output

Error message

inputRange (${inputRange.length} values provided) and outputRange (${outputRange.length} values provided) must have the same length

What it means

Thrown by interpolateColors when inputRange and outputRange have different lengths. Interpolation pairs each input stop with an output color, so the two arrays must be the same length and ordered consistently.

Source

Thrown at packages/core/src/interpolate-colors.ts:713

	input: number,
	inputRange: readonly number[],
	outputRange: readonly string[],
	options?: InterpolateColorsOptions,
): string => {
	if (typeof input === 'undefined') {
		throw new TypeError('input can not be undefined');
	}

	if (typeof inputRange === 'undefined') {
		throw new TypeError('inputRange can not be undefined');
	}

	if (typeof outputRange === 'undefined') {
		throw new TypeError('outputRange can not be undefined');
	}

	if (inputRange.length !== outputRange.length) {
		throw new TypeError(
			'inputRange (' +
				inputRange.length +
				' values provided) and outputRange (' +
				outputRange.length +
				' values provided) must have the same length',
		);
	}

	const processedOutputRange = outputRange.map((c) => processColor(c));

	return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Align the two arrays so every input stop has a matching output color.
2. When generating dynamically, derive both from the same source: inputRange.map((_, i) => palette[i % palette.length]).
3. Assert inputRange.length === outputRange.length before the call.

Example fix

// before
interpolateColors(frame, [0, 50, 100], ['red', 'green']);

// after
interpolateColors(frame, [0, 50, 100], ['red', 'green', 'blue']);

if (inputRange.length !== outputRange.length) {
  throw new TypeError(`Range length mismatch: ${inputRange.length} vs ${outputRange.length}`);
}
interpolateColors(input, inputRange, outputRange);

function rangesMatch(a: readonly unknown[], b: readonly unknown[]): boolean {
  return a.length === b.length;
}

When it happens

Trigger: Passing arrays of mismatched length, e.g. interpolateColors(frame, [0, 50, 100], ['red', 'green']); or building one array dynamically while the other stays fixed.

Common situations: Adding a stop to one range and forgetting the other; generating ranges from different sources (e.g. a frames array vs. a palette array) that diverge in length.

Related errors

• invalid color string ${color} provided
• input can not be undefined
• inputRange can not be undefined
• outputRange can not be undefined
• "${name}" must be a hex color such as "#000000"

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/42b0b7b1252eb2a1. Report an issue: GitHub.