quasarframework/quasar · error · TypeError

Expected a string as color

Error message

Expected a string as color

What it means

Quasar's lighten(color, percent) lightens (or darkens, for negative percent) a color. It throws a TypeError when the first argument is not a string, since it delegates parsing to textToRgb() which requires string input. Note: unlike textToRgb, lighten does not accept {r,g,b} objects.

Source

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

    g: Math.min(255, Math.max(0, Number.parseInt(m[3], 10))),
    b: Math.min(255, Math.max(0, Number.parseInt(m[4], 10)))
  }

  if (m[1]) {
    const alpha = Number.parseFloat(m[5])
    const safeAlpha = Number.isFinite(alpha)
      ? Math.max(0, Math.min(1, alpha))
      : 1
    rgb.a = Math.round(safeAlpha * 100)
  }

  return rgb
}

/* works as darken if percent < 0 */
export function lighten(color, percent) {
  if (typeof color !== 'string') {
    throw new TypeError('Expected a string as color')
  }
  if (typeof percent !== 'number') {
    throw new TypeError('Expected a numeric percent')
  }

  const rgb = textToRgb(color),
    t = percent < 0 ? 0 : 255,
    p = Math.abs(percent) / 100,
    R = rgb.r,
    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 +

View on GitHub (pinned to 4841521b5f)

Solutions

1. Pass a color string: lighten('#ff0000', 20)
2. If you have an {r,g,b} object, convert first with rgbToString(obj) then call lighten
3. Check that the color variable/config is defined and a string at the call site
4. Use getPaletteColor to resolve a Quasar palette name into its hex string before calling

Example fix

// before
lighten(textToRgb('#3498db'), 25) // TypeError
// after
lighten('#3498db', 25)
// or
lighten(rgbToString(textToRgb('#3498db')), 25)

if (typeof color !== 'string' || typeof percent !== 'number') {
  throw new TypeError('lighten needs (string color, numeric percent)')
}
const shaded = lighten(color, percent)

function canLighten(color, percent) {
  return typeof color === 'string' && typeof percent === 'number'
}

try {
  out = lighten(color, 20)
} catch (err) {
  if (err.message === 'Expected a string as color') {
    out = lighten(rgbToString(color), 20) // color was an object
  } else {
    throw err
  }
}

When it happens

Trigger: lighten({ r: 255, g: 0, b: 0 }, 20) (object passed where only a string is accepted), lighten(null, 10), lighten(getPaletteColor(...), 10) if the palette lookup returns non-string.

Common situations: Passing the output of getPaletteColor or textToRgb (an object) back into lighten; refactoring code that previously passed a hex string; missing brand-color config so the variable resolves to undefined.

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 numeric percent
• Expected a string or a {r, g, b} object as color
• 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/b91cb427842a5d58. Report an issue: GitHub.