{"record":{"id":"4da2ad8f1d9e4804","repo":"angular/components","slug":"cannot-parse-the-specified-color-color-please","errorCode":null,"errorMessage":"Cannot parse the specified color ${color}. Please verify it is a hex color (ex. #ffffff or ffffff).","messagePattern":"Cannot parse the specified color (.+?)\\. Please verify it is a hex color \\(ex\\. #ffffff or ffffff\\)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/schematics/ng-generate/theme-color/index.ts","lineNumber":64,"sourceCode":"export interface ColorPalettes {\n  primary: TonalPalette;\n  secondary: TonalPalette;\n  tertiary: TonalPalette;\n  neutral: TonalPalette;\n  neutralVariant: TonalPalette;\n  error: TonalPalette;\n}\n\n/**\n * Gets Hct representation of Hex color.\n * @param color Hex color.\n * @returns Hct color.\n */\nexport function getHctFromHex(color: string): Hct {\n  try {\n    return Hct.fromInt(argbFromHex(color));\n  } catch (e) {\n    throw new Error(\n      'Cannot parse the specified color ' +\n        color +\n        '. Please verify it is a hex color (ex. #ffffff or ffffff).',\n    );\n  }\n}\n\n/**\n * Gets color tonal palettes generated by Material from the provided color.\n * @param primaryPalette Tonal palette that represents primary.\n * @param secondaryPalette Tonal palette that represents secondary.\n * @param tertiaryPalette Tonal palette that represents tertiary.\n * @param neutralPalette Tonal palette that represents neutral.\n * @param neutralVariantPalette Tonal palette that represents neutral variant.\n * @param isDark Boolean to represent if the scheme is for a dark or light theme.\n * @param contrastLevel Number between -1 and 1 for the contrast level. 0 is the standard contrast\n * and 1 represents high contrast.\n * @returns Dynamic scheme for provided theme and contrast level","sourceCodeStart":46,"sourceCodeEnd":82,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/schematics/ng-generate/theme-color/index.ts#L46-L82","documentation":"The ng-generate theme-color schematic parses the user-supplied color with the Material color utilities (argbFromHex) and converts it to Hct. If parsing fails — because the color is not a valid 3/6/8-digit hex string — it rethrows a friendly SchematicsException-style Error telling the user to supply a hex color. It validates the --color option of the schematic.","triggerScenarios":"Running ng generate @angular/material:theme-color with a color like 'red', 'rgb(255,0,0)', '#fff ' with whitespace, or a malformed hex like '#ffzzzz'; passing an empty or omitted color value that reaches getHctFromHex via getColorPalettes/primaryColorHct.","commonSituations":"Users pasting CSS color names or rgb()/hsl() values instead of hex; copy errors dropping the '#' or including extra characters; shell quoting issues mangling the argument.","solutions":["Pass a valid hex color, e.g. ng generate @angular/material:theme-color --color=#34a853 (with or without '#')","Convert named/rgb colors to hex first (e.g. red -> #ff0000)","Check the argument for stray whitespace, quotes, or shell escaping problems and retry","Use a 6-digit hex for clarity (3-digit and 8-digit ARGB forms are also accepted)"],"exampleFix":"// before\nng generate @angular/material:theme-color --color=red\n// after\nng generate @angular/material:theme-color --color=#ff0000","handlingStrategy":"validation","validationCode":"function isHexColor(s: string): boolean {\n  return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(s.trim());\n}\nif (!isHexColor(colorArg)) {\n  throw new Error('Provide a hex color like #ffffff or ffffff');\n}","typeGuard":"function isHexColor(s: unknown): s is string {\n  return typeof s === 'string' && /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(s.trim());\n}","tryCatchPattern":"try {\n  const hct = getHctFromHex(userColor);\n} catch (e) {\n  if (String(e?.message).startsWith('Cannot parse the specified color')) {\n    console.error(`\"${userColor}\" is not a hex color; use e.g. #34a853`);\n    return;\n  }\n  throw e;\n}","preventionTips":["Always pass hex colors (#rgb, #rrggbb, or #aarrggbb) to theme-color options","Convert named/rgb()/hsl() colors to hex before invoking the schematic","Quote shell arguments to avoid mangling ('--color=#34a853')","Trim whitespace from config-driven color values before passing them"],"tags":["angular","schematics","theming","color-parsing","validation"],"backgroundTag":"invalid-hex-color","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}