{"record":{"id":"8f2161211267df17","repo":"mermaid-js/mermaid","slug":"value-for-style-value-is-invalid-please-use-8f2161","errorCode":null,"errorMessage":"value for ${style} ${value} is invalid, please use a valid hex code","messagePattern":"value for (.+?) (.+?) is invalid, please use a valid hex code","errorType":"validation","errorClass":"InvalidStyleError","httpStatus":null,"severity":"error","filePath":"packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts","lineNumber":75,"sourceCode":"  quadrantBuilder.setData({ yAxisTopText: textSanitizer(textObj.text) });\n}\n\nfunction setYAxisBottomText(textObj: LexTextObj) {\n  quadrantBuilder.setData({ yAxisBottomText: textSanitizer(textObj.text) });\n}\n\nfunction parseStyles(styles: string[]): StylesObject {\n  const stylesObject: StylesObject = {};\n  for (const style of styles) {\n    const [key, value] = style.trim().split(/\\s*:\\s*/);\n    if (key === 'radius') {\n      if (validateNumber(value)) {\n        throw new InvalidStyleError(key, value, 'number');\n      }\n      stylesObject.radius = parseInt(value);\n    } else if (key === 'color') {\n      if (validateHexCode(value)) {\n        throw new InvalidStyleError(key, value, 'hex code');\n      }\n      stylesObject.color = value;\n    } else if (key === 'stroke-color') {\n      if (validateHexCode(value)) {\n        throw new InvalidStyleError(key, value, 'hex code');\n      }\n      stylesObject.strokeColor = value;\n    } else if (key === 'stroke-width') {\n      if (validateSizeInPixels(value)) {\n        throw new InvalidStyleError(key, value, 'number of pixels (eg. 10px)');\n      }\n      stylesObject.strokeWidth = value;\n    } else {\n      throw new Error(`style named ${key} is not supported.`);\n    }\n  }\n  return stylesObject;\n}","sourceCodeStart":57,"sourceCodeEnd":93,"githubUrl":"https://github.com/mermaid-js/mermaid/blob/d93e9c88c01a599c062ee6a3f1462e3558ac6b90/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts#L57-L93","documentation":"Thrown by parseStyles when a style line has key 'color' but its value fails validateHexCode. The validator returns true (invalid) when the value does NOT match an optional '#' followed by exactly 3 or 6 hex digits. So values like 'red', '#12', '#GGGGGG', or 'fff ' (trailing space) all trip the guard. The InvalidStyleError message asks for a valid hex code.","triggerScenarios":"Writing 'color: red' (named color), 'color: #1234' (4 digits), 'color: fff' with stray whitespace, or any non-hex color string.","commonSituations":"Author assumes CSS named colors (red, blue) are accepted; copy-pasting 8-digit RGBA hex (#RRGGBBAA) which the 3/6-digit regex rejects; trailing whitespace breaking the match.","solutions":["Use a 3- or 6-digit hex code with an optional leading '#', e.g. 'color: #FF0000' or 'color: F00'.","Convert named colors to hex before rendering.","Strip trailing/leading whitespace from the value.","Avoid 8-digit alpha hex; use 6-digit and set opacity another way if supported."],"exampleFix":"// before\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {color: red}\n\n// after\nquadrantChart\n  point [0.5, 0.5]: \"Label\" : {color: #FF0000}","handlingStrategy":"validation","validationCode":"function validateHex(value: string): boolean {\n  return /^#?([\\dA-Fa-f]{6}|[\\dA-Fa-f]{3})$/.test(value.trim());\n}","typeGuard":"function isValidHexCode(value: string): boolean {\n  return /^#?([\\dA-Fa-f]{6}|[\\dA-Fa-f]{3})$/.test(value.trim());\n}","tryCatchPattern":"try {\n  await mermaid.render('g', diagramText);\n} catch (e) {\n  if (e instanceof Error && /value for color .* please use a valid hex code/.test(e.message)) {\n    showUserError('Quadrant point color must be a 3- or 6-digit hex code (e.g. #FF0000). Named colors are not accepted.');\n  } else throw e;\n}","preventionTips":["Use 3- or 6-digit hex codes with optional leading '#'.","Convert named colors to hex before rendering.","Avoid 8-digit alpha hex; trim whitespace."],"tags":["mermaid","quadrant-chart","parsing","validation"],"backgroundTag":null,"analyzedSha":"d93e9c88c01a599c062ee6a3f1462e3558ac6b90","analyzedAt":"2026-08-12T06:23:11.304Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}