quasarframework/quasar · error · TypeError

Expected a string or a {r, g, b[, a]} object as fgColor

Error message

Expected a string or a {r, g, b[, a]} object as fgColor

What it means

Quasar's blend(fgColor, bgColor) alpha-blends two colors. Both arguments must be a color string or an {r,g,b[,a]} object; a foreground that is neither (null, undefined, number, object without r) throws this TypeError before the background is even validated.

Source

Thrown at ui/src/utils/colors/colors.js:231

    R = r <= 0.03928 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4,
    G = g <= 0.03928 ? g / 12.92 : ((g + 0.055) / 1.055) ** 2.4,
    B = b <= 0.03928 ? b / 12.92 : ((b + 0.055) / 1.055) ** 2.4
  return 0.2126 * R + 0.7152 * G + 0.0722 * B
}

export function brightness(color) {
  if (typeof color !== 'string' && (!color || color.r === void 0)) {
    throw new TypeError('Expected a string or a {r, g, b} object as color')
  }

  const rgb = typeof color === 'string' ? textToRgb(color) : color

  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
}

export function blend(fgColor, bgColor) {
  if (typeof fgColor !== 'string' && (!fgColor || fgColor.r === void 0)) {
    throw new TypeError(
      'Expected a string or a {r, g, b[, a]} object as fgColor'
    )
  }

  if (typeof bgColor !== 'string' && (!bgColor || bgColor.r === void 0)) {
    throw new TypeError(
      'Expected a string or a {r, g, b[, a]} object as bgColor'
    )
  }

  const rgb1 = typeof fgColor === 'string' ? textToRgb(fgColor) : fgColor,
    r1 = rgb1.r / 255,
    g1 = rgb1.g / 255,
    b1 = rgb1.b / 255,
    a1 = rgb1.a !== void 0 ? rgb1.a / 100 : 1,
    rgb2 = typeof bgColor === 'string' ? textToRgb(bgColor) : bgColor,
    r2 = rgb2.r / 255,
    g2 = rgb2.g / 255,

View on GitHub (pinned to 4841521b5f)

Solutions

1. Pass strings for both: blend('#80808040', '#ffffff')
2. Validate that fgColor is a string or has r defined before calling
3. Resolve palette/config colors (getPaletteColor) before blending
4. Provide fallback constants for config-driven colors so they can never be undefined

Example fix

// before
return blend(fgFromConfig, bgColor) // fgFromConfig undefined
// after
return blend(fgFromConfig ?? 'rgba(0,0,0,0.25)', bgColor)

function canBlend(fg, bg) {
  const ok = c => typeof c === 'string' || (c !== null && c !== void 0 && c.r !== void 0)
  return ok(fg) && ok(bg)
}
if (canBlend(fgColor, bgColor)) blend(fgColor, bgColor)

function isBlendableColor(v) {
  return typeof v === 'string' || (v !== null && typeof v === 'object' && v.r !== void 0)
}

try {
  out = blend(fg, bg)
} catch (err) {
  if (err.message.includes('as fgColor')) {
    out = blend('rgba(0,0,0,0.25)', bg) // default overlay
  } else if (err.message.includes('as bgColor')) {
    out = blend(fg, '#ffffff')
  } else {
    throw err
  }
}

When it happens

Trigger: blend(undefined, '#fff'), blend(123, '#000'), blend({}, '#000'), or the changeAlpha/getPaletteColor pipeline feeding an unresolved color into blend.

Common situations: Overlay/tint colors read from config that isn't loaded; passing textToRgb output mixed with a raw hex inconsistently across branches; typos in computed color objects (missing r).

Understand the failure class

Background: Invalid argument type errors: "must be of type string", "expected X, got Y", and ERR_INVALID_ARG_TYPE explained — this error's family across 15 libraries.

Related errors

• Expected a string
• Expected a string as color
• Expected a numeric percent
• Expected a string or a {r, g, b} object as color
• Expected 3 numbers below 256 (and optionally one below 100)

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/a448447d927b96ee. Report an issue: GitHub.