quasarframework/quasar · error · TypeError

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

Error message

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

What it means

Quasar's blend() mixes two colors and requires both fgColor and bgColor to be either a CSS color string or an {r, g, b[, a]} object. It throws this TypeError when bgColor is neither a string nor an object with an r property (including null/undefined). This guard exists so the mixing math always receives a usable color representation.

Source

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

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,
    b2 = rgb2.b / 255,
    a2 = rgb2.a !== void 0 ? rgb2.a / 100 : 1,
    a = a1 + a2 * (1 - a1),
    r = Math.round(((r1 * a1 + r2 * a2 * (1 - a1)) / a) * 255),
    g = Math.round(((g1 * a1 + g2 * a2 * (1 - a1)) / a) * 255),
    b = Math.round(((b1 * a1 + b2 * a2 * (1 - a1)) / a) * 255)

View on GitHub (pinned to 4841521b5f)

Solutions

1. Pass bgColor as a valid CSS color string, e.g. colors.blend('#ff0000', '#0000ff').
2. Pass an {r, g, b[, a]} object with at least the r property set, e.g. colors.blend(fg, { r: 0, g: 0, b: 0 }).
3. If the color comes from getCssVar() or config, default it: bg = bgColor || '#000000'.
4. Use colors.textToRgb() to normalize arbitrary input and validate before calling blend().

Example fix

// before
const mixed = colors.blend('#fff', bgColor) // bgColor undefined
// after
const mixed = colors.blend('#fff', bgColor || '#000000')

const isValidColorInput = (c) =>
  typeof c === 'string' || (c != null && typeof c === 'object' && c.r !== undefined)
if (!isValidColorInput(bgColor)) throw new Error('bgColor must be a color string or {r,g,b[,a]}')

const isRgbObject = (c) => typeof c === 'object' && c !== null && 'r' in c && 'g' in c && 'b' in c

let mixed
try {
  mixed = colors.blend(fg, bg)
} catch (err) {
  if (err instanceof TypeError && /bgColor/.test(err.message)) {
    mixed = fg // fallback
  } else throw err
}

When it happens

Trigger: Calling colors.blend(fg, bg) where bgColor is undefined, null, a number, or an object missing the r property (e.g. {g:0,b:0}); also passing an RGB object as fgColor but forgetting bgColor entirely.

Common situations: Dynamic theme code reading a color from config or a CSS variable that resolved to undefined; typos like passing {red,green,blue} instead of {r,g,b}; passing the result of a failed getCssVar() (null) directly as bgColor.

Related errors

• Expected offset to be between -1 and 1
• Expected a string as propName
• Expected a DOM element
• Expected a string as propName
• Expected a string as value

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