quasarframework/quasar · error · TypeError

Expected a string

Error message

Expected a string

What it means

Quasar's hexToRgb() requires its argument to be a string containing a hex color. It throws a TypeError when the input is not a string (number, object, null, undefined). The library validates early so downstream string operations (codePointAt, slice, length) cannot fail mysteriously.

Source

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

    throw new TypeError(
      'Expected 3 numbers below 256 (and optionally one below 100)'
    )
  }

  a = alpha
    ? (Math.round((255 * a) / 100) | (1 << 8)).toString(16).slice(1)
    : ''

  return '#' + (b | (g << 8) | (r << 16) | (1 << 24)).toString(16).slice(1) + a
}

export function rgbToString({ r, g, b, a }) {
  return `rgb${a !== void 0 ? 'a' : ''}(${r},${g},${b}${a !== void 0 ? ',' + a / 100 : ''})`
}

export function hexToRgb(hex) {
  if (typeof hex !== 'string') {
    throw new TypeError('Expected a string')
  }

  if (hex.codePointAt(0) === 35) hex = hex.slice(1) // #

  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
  } else if (hex.length === 4) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
  }

  const num = Number.parseInt(hex, 16)

  return hex.length > 6
    ? {
        r: (num >> 24) & 255,
        g: (num >> 16) & 255,
        b: (num >> 8) & 255,
        a: Math.round((num & 255) / 2.55)

View on GitHub (pinned to 4841521b5f)

Solutions

1. Convert numbers to a hex string first: hexToRgb('#' + num.toString(16).padStart(6, '0'))
2. If you already have an {r,g,b} object, skip hexToRgb and use the value directly (or rgbToString)
3. Add typeof checks at the input boundary of your own color utilities
4. Fix the data source (config/model) so color values are stored as strings like '#ff0000'

Example fix

// before
const rgb = hexToRgb(props.colorNumber)
// after
const rgb = typeof props.colorNumber === 'number'
  ? hexToRgb('#' + props.colorNumber.toString(16).padStart(6, '0'))
  : hexToRgb(props.colorNumber)

if (typeof value !== 'string' || value.length === 0) {
  value = '#000000' // or handle explicitly
}
const rgb = hexToRgb(value)

function isHexColorString(v) {
  return typeof v === 'string' && /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v.trim())
}

try {
  rgb = hexToRgb(color)
} catch (err) {
  if (err.message === 'Expected a string') {
    rgb = { r: 0, g: 0, b: 0 }
  } else {
    throw err
  }
}

When it happens

Trigger: hexToRgb(0xff0000) (a number, not a string), hexToRgb(null), hexToRgb({ r: 1, g: 2, b: 3 }), or onEditorChange/textToRgb receiving a non-string model value and forwarding it.

Common situations: QColor editor/model returning an object; passing a parsed color object where a string is expected; reading color values from JSON/config that came as numbers.

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 as color
• 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/a1812fd7333466cc. Report an issue: GitHub.