What causes "invalid color string ${color} provided" in remotion-dev/remotion?

Validate each color with a quick regex or a parser before passing it to interpolateColors.

remotion-dev/remotion · error · Error

invalid color string ${color} provided

Error message

invalid color string ${color} provided

What it means

Thrown by the internal color parser (processColor) used by interpolateColors when the supplied string does not match any supported CSS color format (hex, rgb/rgba, hsl/hsla, hwb, named colors, etc.). The offending string is echoed back.

Source

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

			const alpha = parseModernAlpha(match[4]);
			const hRad = (H * Math.PI) / 180;
			const [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
			return rgbFloatToInt(r, g, bl, alpha);
		}
	}

	if (matchers.hwb) {
		if ((match = matchers.hwb.exec(color))) {
			const H = parseHueAngle(match[1]);
			const W = parseModernComponent(match[2], 1); // 100% = 1
			const B = parseModernComponent(match[3], 1);
			const alpha = parseModernAlpha(match[4]);
			const [r, g, bl] = hwbToSrgb(H / 360, W, B);
			return rgbFloatToInt(r, g, bl, alpha);
		}
	}

	throw new Error(`invalid color string ${color} provided`);
}

const opacity = (c: number): number => {
	return ((c >> 24) & 255) / 255;
};

const red = (c: number): number => {
	return (c >> 16) & 255;
};

const green = (c: number): number => {
	return (c >> 8) & 255;
};

const blue = (c: number): number => {
	return c & 255;
};

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Validate each color with a quick regex or a parser before passing it to interpolateColors.
Prefer 6-digit hex (#rrggbb) or 8-digit hex (#rrggbbaa) to avoid format ambiguity.
Strip whitespace and confirm alpha syntax matches the parser's expectations.
Log outputRange at the call site to spot the malformed entry.

Example fix

// before
interpolateColors(frame, [0, 100], ['reb', '#00ff00']);

// after
interpolateColors(frame, [0, 100], ['#ff0000', '#00ff00']);

Defensive patterns

Strategy: validation

Validate before calling

const COLOR_RE = /^(#[0-9a-fA-F]{3,8}|rgba?\(.+\)|hsla?\(.+\)|[a-z]+)$/i;
function assertColors(colors: readonly string[]): void {
  for (const c of colors) {
    if (!COLOR_RE.test(c.trim())) {
      throw new Error(`Invalid color string: ${c}`);
    }
  }
}
assertColors(outputRange);
interpolateColors(input, inputRange, outputRange);

Type guard

const isColorString = (c: unknown): c is string => typeof c === 'string' && /^(#[0-9a-fA-F]{3,8}|rgba?\(.+\)|hsla?\(.+\)|[a-z]+)$/i.test(c.trim());

Prevention

Prefer 6- or 8-digit hex to remove format ambiguity.
Validate color strings before passing them to interpolateColors.
Avoid concatenating user input into color strings without checks.

When it happens

Trigger: Passing a malformed color string to interpolateColors' outputRange — typos like '#ff000', 'rgb(255 0 0', 'rebeccapurplee', or an empty string.

Common situations: Hardcoded color literals with a typo; dynamically-built color strings from concatenation; CSS color keywords the parser does not recognize; values with leading/trailing whitespace or wrong alpha syntax.

Related errors

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