{"record":{"id":"cae75738410feafc","repo":"quasarframework/quasar","slug":"expected-3-numbers-below-256-and-optionally-one-b","errorCode":null,"errorMessage":"Expected 3 numbers below 256 (and optionally one below 100)","messagePattern":"Expected 3 numbers below 256 \\(and optionally one below 100\\)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/colors/colors.js","lineNumber":11,"sourceCode":"const reRGBA = /^rgb(a)?\\((\\d{1,3}),(\\d{1,3}),(\\d{1,3}),?([01]?\\.?\\d*?)?\\)$/\n\nexport function rgbToHex({ r, g, b, a }) {\n  const alpha = a !== void 0\n\n  r = Math.round(r)\n  g = Math.round(g)\n  b = Math.round(b)\n\n  if (r > 255 || g > 255 || b > 255 || (alpha && a > 100)) {\n    throw new TypeError(\n      'Expected 3 numbers below 256 (and optionally one below 100)'\n    )\n  }\n\n  a = alpha\n    ? (Math.round((255 * a) / 100) | (1 << 8)).toString(16).slice(1)\n    : ''\n\n  return '#' + (b | (g << 8) | (r << 16) | (1 << 24)).toString(16).slice(1) + a\n}\n\nexport function rgbToString({ r, g, b, a }) {\n  return `rgb${a !== void 0 ? 'a' : ''}(${r},${g},${b}${a !== void 0 ? ',' + a / 100 : ''})`\n}\n\nexport function hexToRgb(hex) {\n  if (typeof hex !== 'string') {\n    throw new TypeError('Expected a string')","sourceCodeStart":1,"sourceCodeEnd":29,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/colors/colors.js#L1-L29","documentation":"Quasar's rgbToHex() converts r/g/b (and optional alpha percent) to a hex color string. It rounds each channel first, then throws a TypeError if any channel exceeds 255 or an alpha value exceeds 100. The error indicates the numeric color inputs are out of the valid RGB/alpha-percent ranges.","triggerScenarios":"rgbToHex(300, 0, 0), rgbToHex(0, 0, 0, 150) (alpha percent > 100), or any caller (updateModel, parseModel, blend, changeAlpha, getPaletteColor pipeline) that receives computed channel values above 255 or alpha above 100.","commonSituations":"Color math done manually without clamping (blending, brightening) pushing channels over 255; parsing user input or CSV/design tokens where a value is 256–999; passing alpha as 0–1 fraction when the function expects 0–100 percent (e.g. 150 instead of 1.5 or 100).","solutions":["Clamp channels with Math.min(255, value) and alpha with Math.min(100, value) before calling rgbToHex","Verify alpha is a 0–100 percent number, not a 0–1 fraction or a raw 8-bit alpha","Check upstream color math (blend/changeAlpha inputs) for sign/range errors producing >255","Validate user-supplied color numbers at the UI boundary before conversion"],"exampleFix":"// before\nconst hex = rgbToHex(r, g, b, a)\n// after\nconst hex = rgbToHex(Math.min(255, Math.round(r)), Math.min(255, Math.round(g)), Math.min(255, Math.round(b)), Math.min(100, a))","handlingStrategy":"validation","validationCode":"function canConvertToHex(r, g, b, a) {\n  const ok = [r, g, b].every(n => Number.isFinite(n) && Math.round(n) <= 255 && Math.round(n) >= 0)\n  const alphaOk = a === void 0 || (Number.isFinite(a) && a <= 100)\n  return ok && alphaOk\n}\nif (!canConvertToHex(r, g, b, a)) clamp before calling rgbToHex","typeGuard":"function isRgbChannel(v) {\n  return typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 255\n}\nfunction isAlphaPercent(v) {\n  return v === void 0 || (typeof v === 'number' && v >= 0 && v <= 100)\n}","tryCatchPattern":"try {\n  hex = rgbToHex(r, g, b, a)\n} catch (err) {\n  if (err.message.startsWith('Expected 3 numbers')) {\n    hex = rgbToHex(Math.min(255, r), Math.min(255, g), Math.min(255, b), Math.min(100, a))\n  } else {\n    throw err\n  }\n}","preventionTips":["Clamp after any arithmetic on color channels (blend, lighten) before converting","Keep alpha in 0–100 percent consistently across your codebase","Validate design-token/CSV color numbers at ingestion time","Write a unit test covering boundary values 0, 255, 256 and alpha 100/101"],"tags":["colors","range-validation","typeerror"],"backgroundTag":"color-value-out-of-range","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}