angular/components · error · Error

Cannot parse the specified color ${color}. Please verify it

Error message

Cannot parse the specified color ${color}. Please verify it is a hex color (ex. #ffffff or ffffff).

What it means

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.

Source

Thrown at src/material/schematics/ng-generate/theme-color/index.ts:64

export interface ColorPalettes {
  primary: TonalPalette;
  secondary: TonalPalette;
  tertiary: TonalPalette;
  neutral: TonalPalette;
  neutralVariant: TonalPalette;
  error: TonalPalette;
}

/**
 * Gets Hct representation of Hex color.
 * @param color Hex color.
 * @returns Hct color.
 */
export function getHctFromHex(color: string): Hct {
  try {
    return Hct.fromInt(argbFromHex(color));
  } catch (e) {
    throw new Error(
      'Cannot parse the specified color ' +
        color +
        '. Please verify it is a hex color (ex. #ffffff or ffffff).',
    );
  }
}

/**
 * Gets color tonal palettes generated by Material from the provided color.
 * @param primaryPalette Tonal palette that represents primary.
 * @param secondaryPalette Tonal palette that represents secondary.
 * @param tertiaryPalette Tonal palette that represents tertiary.
 * @param neutralPalette Tonal palette that represents neutral.
 * @param neutralVariantPalette Tonal palette that represents neutral variant.
 * @param isDark Boolean to represent if the scheme is for a dark or light theme.
 * @param contrastLevel Number between -1 and 1 for the contrast level. 0 is the standard contrast
 * and 1 represents high contrast.
 * @returns Dynamic scheme for provided theme and contrast level

View on GitHub (pinned to 0411926e7d)

Solutions

1. Pass a valid hex color, e.g. ng generate @angular/material:theme-color --color=#34a853 (with or without '#')
2. Convert named/rgb colors to hex first (e.g. red -> #ff0000)
3. Check the argument for stray whitespace, quotes, or shell escaping problems and retry
4. Use a 6-digit hex for clarity (3-digit and 8-digit ARGB forms are also accepted)

Example fix

// before
ng generate @angular/material:theme-color --color=red
// after
ng generate @angular/material:theme-color --color=#ff0000

function isHexColor(s: string): boolean {
  return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(s.trim());
}
if (!isHexColor(colorArg)) {
  throw new Error('Provide a hex color like #ffffff or ffffff');
}

function isHexColor(s: unknown): s is string {
  return typeof s === 'string' && /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(s.trim());
}

try {
  const hct = getHctFromHex(userColor);
} catch (e) {
  if (String(e?.message).startsWith('Cannot parse the specified color')) {
    console.error(`"${userColor}" is not a hex color; use e.g. #34a853`);
    return;
  }
  throw e;
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Cannot read "${filePath}" because it does not exist.
• No data could be found for target version: ${version}
• Could not find file for path: ${path}
• Module not found: ${modulePath}
• Could not read Angular module file: ${modulePath}

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/4da2ad8f1d9e4804. Report an issue: GitHub.