HTML Guides for lexical-error

When you write a hex color in CSS, the # symbol must be followed by exactly 3, 4, 6, or 8 hexadecimal digits (characters 0–9 and a–f). Writing background-color: #; or background-color: #; means the CSS parser encounters the statement-ending semicolon immediately after #, with no color data. The parser cannot interpret this as a valid token, so it throws a lexical error.

This commonly happens when:

• A color value is accidentally deleted or left as a placeholder during development.
• A template engine or CMS outputs an empty variable where a color value was expected (e.g., background-color: #{{ color }}; where color is empty).
• A hex value is truncated, such as #f or #zz, containing an invalid number of digits or non-hex characters.

While most browsers will silently ignore the invalid declaration and fall back to the inherited or default background color, this creates unpredictable behavior. The element may render differently than intended, and the invalid CSS clutters your codebase. Fixing it ensures consistent rendering and standards compliance.

How to fix it

1. Find the error location. The validator message includes the line and column number — go to that exact spot in your HTML or CSS file.
2. Look at the background-color value. You’ll likely see # followed immediately by ;, or a # with an incomplete or invalid hex string.
3. Provide a valid color value. Replace the broken value with a proper hex code, a color keyword, or a functional notation like rgb() or hsl().

If the color value comes from a dynamic source (like a CMS or JavaScript variable), add a fallback so an empty value doesn’t produce invalid CSS.

Examples

❌ Incomplete hex value (triggers the error)

<div style="background-color: #;">
  Hello
</div>

The # has no hex digits before the semicolon, causing the lexical error.

✅ Fixed with a valid hex color

<div style="background-color: #ffffff;">
  Hello
</div>

❌ Truncated or invalid hex digits

<div style="background-color: #g3;">
  Hello
</div>

The character g is not a valid hexadecimal digit, and two digits is not a valid hex color length.

✅ Fixed with a proper 3-digit shorthand hex color

<div style="background-color: #f0f;">
  Hello
</div>

✅ Alternative valid color formats

Any of these are valid replacements for a broken hex value:

/* 6-digit hex */
background-color: #1a2b3c;

/* 3-digit shorthand hex */
background-color: #abc;

/* 8-digit hex with alpha */
background-color: #1a2b3cff;

/* Named color keyword */
background-color: white;

/* RGB functional notation */
background-color: rgb(255, 255, 255);

/* RGBA with transparency */
background-color: rgba(0, 0, 0, 0.5);

/* HSL functional notation */
background-color: hsl(210, 50%, 60%);

/* HSLA with transparency */
background-color: hsla(210, 50%, 60%, 0.8);

✅ Defensive approach for dynamic values

If a CMS or templating system inserts the color, consider providing a fallback so an empty value doesn’t break your CSS:

<div style="background-color: #f0f0f0;">
  Content with a safe default background
</div>

In your template logic, ensure empty color values either output a sensible default or omit the style attribute entirely rather than producing background-color: #;.