vuetifyjs/vuetify · error · TypeError

Invalid color: ${color == null ? color : (String(color) || (

Error message

Invalid color: ${color == null ? color : (String(color) || (color as any).constructor.name)}\nExpected #hex, #hexa, rgb(), rgba(), hsl(), hsla(), object or number

What it means

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).

Source

Thrown at packages/vuetify/src/util/colorUtils.ts:90

    }

    const int = parseInt(hex, 16)
    if (isNaN(int) || int < 0 || int > 0xFFFFFFFF) {
      consoleWarn(`'${color}' is not a valid hex(a) color`)
    }

    return HexToRGB(hex as Hex)
  } else if (typeof color === 'object') {
    if (has(color, ['r', 'g', 'b'])) {
      return color
    } else if (has(color, ['h', 's', 'l'])) {
      return HSVtoRGB(HSLtoHSV(color))
    } else if (has(color, ['h', 's', 'v'])) {
      return HSVtoRGB(color)
    }
  }

  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`)
}

export function RGBToInt (color: RGB) {
  return (color.r << 16) + (color.g << 8) + color.b
}

export function classToHex (
  color: string,
  colors: Record<string, Record<string, string>>,
  currentTheme: Partial<Colors>,
): string {
  const [colorName, colorModifier] = color
    .toString().trim().replace('-', '').split(' ', 2) as (string | undefined)[]

  let hexColor = ''
  if (colorName && colorName in colors) {
    if (colorModifier && colorModifier in colors[colorName]) {
      hexColor = colors[colorName][colorModifier]

View on GitHub (pinned to 8d153908df)

Solutions

1. Normalize the value to a #hex or rgb() string before passing it to a color prop.
2. Guard against null/undefined and empty/transparent strings before parsing.
3. Use a Vuetify theme color name or a #hex value.

Example fix

// before
useTextColor(() => apiColor)

// after
useTextColor(() => isColor(apiColor) ? apiColor : '#000000')

const COLOR_RE = /^(#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})|rgb\(.+\)|rgba\(.+\)|hsl\(.+\)|hsla\(.+\)|\d+)$/i
export function isValidColor (c: unknown): c is string | number {
  if (typeof c === 'number') return true
  if (typeof c !== 'string') return false
  const s = c.trim()
  return s !== '' && s.toLowerCase() !== 'transparent' && COLOR_RE.test(s)
}

export function isColorObject (c: unknown): c is { r: number; g: number; b: number } {
  return !!c && typeof c === 'object' && 'r' in c && 'g' in c && 'b' in c
}

try {
  parseColor(value)
} catch (e) {
  // fall back to a safe default color
  parseColor('#000000')
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Could not find Vuetify theme injection
• Could not find Vuetify rules injection

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/7a1b0b07f2dc61ea. Report an issue: GitHub.