{"record":{"id":"fe49839a12229e5f","repo":"quasarframework/quasar","slug":"expected-a-string-or-a-r-g-b-a-object-as-bg","errorCode":null,"errorMessage":"Expected a string or a {r, g, b[, a]} object as bgColor","messagePattern":"Expected a string or a (.+?) object as bgColor","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/colors/colors.js","lineNumber":237,"sourceCode":"export function brightness(color) {\n  if (typeof color !== 'string' && (!color || color.r === void 0)) {\n    throw new TypeError('Expected a string or a {r, g, b} object as color')\n  }\n\n  const rgb = typeof color === 'string' ? textToRgb(color) : color\n\n  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000\n}\n\nexport function blend(fgColor, bgColor) {\n  if (typeof fgColor !== 'string' && (!fgColor || fgColor.r === void 0)) {\n    throw new TypeError(\n      'Expected a string or a {r, g, b[, a]} object as fgColor'\n    )\n  }\n\n  if (typeof bgColor !== 'string' && (!bgColor || bgColor.r === void 0)) {\n    throw new TypeError(\n      'Expected a string or a {r, g, b[, a]} object as bgColor'\n    )\n  }\n\n  const rgb1 = typeof fgColor === 'string' ? textToRgb(fgColor) : fgColor,\n    r1 = rgb1.r / 255,\n    g1 = rgb1.g / 255,\n    b1 = rgb1.b / 255,\n    a1 = rgb1.a !== void 0 ? rgb1.a / 100 : 1,\n    rgb2 = typeof bgColor === 'string' ? textToRgb(bgColor) : bgColor,\n    r2 = rgb2.r / 255,\n    g2 = rgb2.g / 255,\n    b2 = rgb2.b / 255,\n    a2 = rgb2.a !== void 0 ? rgb2.a / 100 : 1,\n    a = a1 + a2 * (1 - a1),\n    r = Math.round(((r1 * a1 + r2 * a2 * (1 - a1)) / a) * 255),\n    g = Math.round(((g1 * a1 + g2 * a2 * (1 - a1)) / a) * 255),\n    b = Math.round(((b1 * a1 + b2 * a2 * (1 - a1)) / a) * 255)","sourceCodeStart":219,"sourceCodeEnd":255,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/colors/colors.js#L219-L255","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Pass bgColor as a valid CSS color string, e.g. colors.blend('#ff0000', '#0000ff').","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 }).","If the color comes from getCssVar() or config, default it: bg = bgColor || '#000000'.","Use colors.textToRgb() to normalize arbitrary input and validate before calling blend()."],"exampleFix":"// before\nconst mixed = colors.blend('#fff', bgColor) // bgColor undefined\n// after\nconst mixed = colors.blend('#fff', bgColor || '#000000')","handlingStrategy":"validation","validationCode":"const isValidColorInput = (c) =>\n  typeof c === 'string' || (c != null && typeof c === 'object' && c.r !== undefined)\nif (!isValidColorInput(bgColor)) throw new Error('bgColor must be a color string or {r,g,b[,a]}')","typeGuard":"const isRgbObject = (c) => typeof c === 'object' && c !== null && 'r' in c && 'g' in c && 'b' in c","tryCatchPattern":"let mixed\ntry {\n  mixed = colors.blend(fg, bg)\n} catch (err) {\n  if (err instanceof TypeError && /bgColor/.test(err.message)) {\n    mixed = fg // fallback\n  } else throw err\n}","preventionTips":["Default config-driven colors to valid hex strings at load time.","Normalize all colors through colors.textToRgb() once at the boundary.","Remember getCssVar() can return null — never feed it straight into color APIs."],"tags":["typeerror","colors","argument-validation","quasar"],"backgroundTag":"invalid-color-argument","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}