{"record":{"id":"c8c72a008681d546","repo":"videojs/video.js","slug":"invalid-color-code-provided-color-must-b","errorCode":null,"errorMessage":"Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.","messagePattern":"Invalid color code provided, ' \\+ color \\+ '; must be formatted as e\\.g\\. #f0e or #f604e2\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/js/tracks/text-track-display.js","lineNumber":49,"sourceCode":" *        Hex number for color, like #f0e or #f604e2.\n *\n * @param {number} opacity\n *        Value for opacity, 0.0 - 1.0.\n *\n * @return {string}\n *         The rgba color that was created, like 'rgba(255, 0, 0, 0.3)'.\n */\nexport function constructColor(color, opacity) {\n  let hex;\n\n  if (color.length === 4) {\n    // color looks like \"#f0e\"\n    hex = color[1] + color[1] + color[2] + color[2] + color[3] + color[3];\n  } else if (color.length === 7) {\n    // color looks like \"#f604e2\"\n    hex = color.slice(1);\n  } else {\n    throw new Error('Invalid color code provided, ' + color + '; must be formatted as e.g. #f0e or #f604e2.');\n  }\n  return 'rgba(' +\n    parseInt(hex.slice(0, 2), 16) + ',' +\n    parseInt(hex.slice(2, 4), 16) + ',' +\n    parseInt(hex.slice(4, 6), 16) + ',' +\n    opacity + ')';\n}\n\n/**\n * Try to update the style of a DOM element. Some style changes will throw an error,\n * particularly in IE8. Those should be noops.\n *\n * @param {Element} el\n *        The DOM element to be styled.\n *\n * @param {string} style\n *        The CSS property on the element that should be styled.\n *","sourceCodeStart":31,"sourceCodeEnd":67,"githubUrl":"https://github.com/videojs/video.js/blob/c3a7e0e6d20cf5400c9afbee29965fe4dff393c2/src/js/tracks/text-track-display.js#L31-L67","documentation":"Thrown by constructColor(color, opacity) when the color string is not exactly 4 characters ('#rgb') or 7 characters ('#rrggbb'). constructColor converts a hex color plus an opacity into an rgba() string for VTT cue styling. Named colors, rgb()/hsl() notation, 8-digit alpha hex, and missing/malformed values are all rejected.","triggerScenarios":"Calling constructColor directly with a bad format, or indirectly through text-track-display when overrides.color / overrides.backgroundColor / overrides.windowColor is a named color ('red'), 3/6-digit hex with extra chars, 8-digit hex ('#ff0000ff'), rgb()/hsl(), or a CSS variable value. These overrides originate from VTT cue 'style' settings or from player text-track-format options.","commonSituations":"Feeding caption colors from a design-system palette that uses 8-digit hex or named colors; reading color values from CSS custom properties or user input without normalization; trying to encode alpha in the hex instead of the separate opacity parameter.","solutions":["Normalize the color to 3-digit or 6-digit hex before passing (strip alpha, convert named/rgb/hsl via a color library).","Use the separate opacity parameter for alpha, not 8-digit hex.","Validate against /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/ before calling."],"exampleFix":"// before\nconstructColor('#ff0000ff', 0.5);\n// after\nconstructColor('#ff0000', 0.5);","handlingStrategy":"validation","validationCode":"const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;\nfunction safeConstructColor(color, opacity) {\n  if (!HEX.test(color)) {\n    throw new TypeError(`color must be #rgb or #rrggbb, got: ${color}`);\n  }\n  return videojs.constructColor(color, opacity);\n}","typeGuard":"function isValidHexColor(c) {\n  return typeof c === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(c);\n}","tryCatchPattern":"try {\n  style.color = videojs.constructColor(color, opacity);\n} catch (err) {\n  if (/Invalid color code/.test(err.message)) {\n    style.color = videojs.constructColor('#fff', opacity);\n  } else { throw err; }\n}","preventionTips":["Normalize design-system colors (named, hsl, rgb, 8-digit hex) to 6-digit hex before styling cues.","Keep alpha in the separate opacity parameter, never in the hex.","Validate user-supplied colors against the hex regex before applying."],"tags":["color","text-track","styling","validation"],"backgroundTag":null,"analyzedSha":"c3a7e0e6d20cf5400c9afbee29965fe4dff393c2","analyzedAt":"2026-08-13T04:20:15.471Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}