{"record":{"id":"7a1b0b07f2dc61ea","repo":"vuetifyjs/vuetify","slug":"invalid-color-color-null-color-string-c","errorCode":null,"errorMessage":"Invalid color: ${color == null ? color : (String(color) || (color as any).constructor.name)}\\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number","messagePattern":"Invalid color: (.+?)\\\\nExpected #hex, #hexa, rgb\\(\\), rgba\\(\\), hsl\\(\\), hsla\\(\\), object or number","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/vuetify/src/util/colorUtils.ts","lineNumber":90,"sourceCode":"    }\n\n    const int = parseInt(hex, 16)\n    if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) {\n      consoleWarn(`'${color}' is not a valid hex(a) color`)\n    }\n\n    return HexToRGB(hex as Hex)\n  } else if (typeof color === 'object') {\n    if (has(color, ['r', 'g', 'b'])) {\n      return color\n    } else if (has(color, ['h', 's', 'l'])) {\n      return HSVtoRGB(HSLtoHSV(color))\n    } else if (has(color, ['h', 's', 'v'])) {\n      return HSVtoRGB(color)\n    }\n  }\n\n  throw new TypeError(`Invalid color: ${color == null ? color : (String(color) || (color as any).constructor.name)}\\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number`)\n}\n\nexport function RGBToInt (color: RGB) {\n  return (color.r << 16) + (color.g << 8) + color.b\n}\n\nexport function classToHex (\n  color: string,\n  colors: Record<string, Record<string, string>>,\n  currentTheme: Partial<Colors>,\n): string {\n  const [colorName, colorModifier] = color\n    .toString().trim().replace('-', '').split(' ', 2) as (string | undefined)[]\n\n  let hexColor = ''\n  if (colorName && colorName in colors) {\n    if (colorModifier && colorModifier in colors[colorName]) {\n      hexColor = colors[colorName][colorModifier]","sourceCodeStart":72,"sourceCodeEnd":108,"githubUrl":"https://github.com/vuetifyjs/vuetify/blob/8d153908dffb7592eb389ddbfbab955a0ccc977f/packages/vuetify/src/util/colorUtils.ts#L72-L108","documentation":"The color parser accepts only #hex/#hexa, rgb()/rgba()/hsl()/hsla() strings, plain numbers, or objects with r/g/b, h/s/l, or h/s/v keys. It throws a TypeError for anything else: a value it cannot match (CSS named colors passed to the util, malformed strings, empty strings, or objects missing the expected keys).","triggerScenarios":"Passing an invalid value into a color prop (color, background-color, baseColor, slider-color, etc.) that flows through parseColor/useBackgroundColor/useTextColor; passing 'transparent', '', null-coerced objects, or a bare CSS name to the util; dynamic theme colors from an API.","commonSituations":"Backend/theme returning undefined, '', or 'transparent' for a color; using a CSS named color (e.g. 'rebeccapurple') where a Material name or #hex is expected; typo in a theme variable; passing an object without r/g/b keys.","solutions":["Normalize the value to a #hex or rgb() string before passing it to a color prop.","Guard against null/undefined and empty/transparent strings before parsing.","Use a Vuetify theme color name or a #hex value."],"exampleFix":"// before\nuseTextColor(() => apiColor)\n\n// after\nuseTextColor(() => isColor(apiColor) ? apiColor : '#000000')","handlingStrategy":"validation","validationCode":"const COLOR_RE = /^(#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})|rgb\\(.+\\)|rgba\\(.+\\)|hsl\\(.+\\)|hsla\\(.+\\)|\\d+)$/i\nexport function isValidColor (c: unknown): c is string | number {\n  if (typeof c === 'number') return true\n  if (typeof c !== 'string') return false\n  const s = c.trim()\n  return s !== '' && s.toLowerCase() !== 'transparent' && COLOR_RE.test(s)\n}","typeGuard":"export function isColorObject (c: unknown): c is { r: number; g: number; b: number } {\n  return !!c && typeof c === 'object' && 'r' in c && 'g' in c && 'b' in c\n}","tryCatchPattern":"try {\n  parseColor(value)\n} catch (e) {\n  // fall back to a safe default color\n  parseColor('#000000')\n}","preventionTips":["Normalize dynamic colors to #hex or rgb() before passing to color props.","Treat '', null, and 'transparent' as absent and substitute a default.","Validate backend-provided color values at the boundary."],"tags":["color","validation","theme"],"backgroundTag":null,"analyzedSha":"8d153908dffb7592eb389ddbfbab955a0ccc977f","analyzedAt":"2026-08-12T21:54:20.596Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}