quasarframework/quasar · error · TypeError

Expected a string or a {r, g, b} object as color

Error message

Expected a string or a {r, g, b} object as color

What it means

Quasar's luminosity(color) computes WCAG relative luminance. It accepts either a color string ('#fff', 'rgb(...)') or an {r,g,b} object (with r defined); anything else — null, undefined, numbers, or objects without r — throws this TypeError. It backs the light()/dark() contrast helpers.

Source

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

    G = rgb.g,
    B = rgb.b

  return (
    '#' +
    (
      0x1_00_00_00 +
      (Math.round((t - R) * p) + R) * 0x1_00_00 +
      (Math.round((t - G) * p) + G) * 0x1_00 +
      (Math.round((t - B) * p) + B)
    )
      .toString(16)
      .slice(1)
  )
}

export function luminosity(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,
    r = rgb.r / 255,
    g = rgb.g / 255,
    b = rgb.b / 255,
    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

View on GitHub (pinned to 4841521b5f)

Solutions

1. Pass a color string instead: luminosity('#ff0000')
2. Ensure object inputs include all of r, g, b (numbers)
3. Resolve palette names first: luminosity(getPaletteColor('primary'))
4. Guard the call site: only compute luminosity when the color value is loaded/defined

Example fix

// before
const lum = luminosity(themeColor) // undefined at startup
// after
const lum = themeColor ? luminosity(themeColor) : 0

function canComputeLuminosity(color) {
  return typeof color === 'string'
    || (color !== null && color !== void 0 && color.r !== void 0)
}
const lum = canComputeLuminosity(c) ? luminosity(c) : 0.5

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

try {
  lum = luminosity(color)
} catch (err) {
  if (err.message.includes('{r, g, b} object')) {
    lum = 0.5 // neutral fallback until color resolves
  } else {
    throw err
  }
}

When it happens

Trigger: luminosity(null), luminosity(255), luminosity({ g: 0, b: 0 }) (missing r), or light(textColor, bgColor) receiving an undefined/unresolved color variable.

Common situations: Palette name lookup failing so getPaletteColor returns undefined which is passed on; theme colors not yet loaded at first render; passing an {r,g,b,a} object built manually that lacks r due to a typo (g/b only).

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[, a]} object as fgColor
• 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/a3aacd49150474b1. Report an issue: GitHub.