{"record":{"id":"4823051418532774","repo":"remotion-dev/remotion","slug":"invalid-color-string-color-provided","errorCode":null,"errorMessage":"invalid color string ${color} provided","messagePattern":"invalid color string (.+?) provided","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate-colors.ts","lineNumber":634,"sourceCode":"\t\t\tconst alpha = parseModernAlpha(match[4]);\n\t\t\tconst hRad = (H * Math.PI) / 180;\n\t\t\tconst [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));\n\t\t\treturn rgbFloatToInt(r, g, bl, alpha);\n\t\t}\n\t}\n\n\tif (matchers.hwb) {\n\t\tif ((match = matchers.hwb.exec(color))) {\n\t\t\tconst H = parseHueAngle(match[1]);\n\t\t\tconst W = parseModernComponent(match[2], 1); // 100% = 1\n\t\t\tconst B = parseModernComponent(match[3], 1);\n\t\t\tconst alpha = parseModernAlpha(match[4]);\n\t\t\tconst [r, g, bl] = hwbToSrgb(H / 360, W, B);\n\t\t\treturn rgbFloatToInt(r, g, bl, alpha);\n\t\t}\n\t}\n\n\tthrow new Error(`invalid color string ${color} provided`);\n}\n\nconst opacity = (c: number): number => {\n\treturn ((c >> 24) & 255) / 255;\n};\n\nconst red = (c: number): number => {\n\treturn (c >> 16) & 255;\n};\n\nconst green = (c: number): number => {\n\treturn (c >> 8) & 255;\n};\n\nconst blue = (c: number): number => {\n\treturn c & 255;\n};\n","sourceCodeStart":616,"sourceCodeEnd":652,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/interpolate-colors.ts#L616-L652","documentation":"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.","triggerScenarios":"Passing a malformed color string to interpolateColors' outputRange — typos like '#ff000', 'rgb(255 0 0', 'rebeccapurplee', or an empty string.","commonSituations":"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.","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."],"exampleFix":"// before\ninterpolateColors(frame, [0, 100], ['reb', '#00ff00']);\n\n// after\ninterpolateColors(frame, [0, 100], ['#ff0000', '#00ff00']);","handlingStrategy":"validation","validationCode":"const COLOR_RE = /^(#[0-9a-fA-F]{3,8}|rgba?\\(.+\\)|hsla?\\(.+\\)|[a-z]+)$/i;\nfunction assertColors(colors: readonly string[]): void {\n  for (const c of colors) {\n    if (!COLOR_RE.test(c.trim())) {\n      throw new Error(`Invalid color string: ${c}`);\n    }\n  }\n}\nassertColors(outputRange);\ninterpolateColors(input, inputRange, outputRange);","typeGuard":"const isColorString = (c: unknown): c is string => typeof c === 'string' && /^(#[0-9a-fA-F]{3,8}|rgba?\\(.+\\)|hsla?\\(.+\\)|[a-z]+)$/i.test(c.trim());","tryCatchPattern":null,"preventionTips":["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."],"tags":["color","interpolate","validation","css"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}