HTML Guides for background-color

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: #;.

The background-color property accepts a specific set of color value types defined in the CSS Color specification. When you provide something that doesn’t match any of these types — like a plain number, a misspelled keyword, or a malformed hex code — the validator flags it as an invalid value.

Common mistakes that trigger this error include:

• Bare numbers like 0 or 255 — numbers alone aren’t colors, even if you intended black or white.
• Misspelled color keywords like grren instead of green, or trasparent instead of transparent.
• Malformed hex codes like #GGG, #12345, or missing the # prefix entirely.
• Incorrect function syntax like rgb(255 0 0 0.5) when mixing legacy comma syntax with modern space syntax improperly, or using rgba with only three arguments.
• Invalid units or strings like background-color: 10px or background-color: "red" (color values should not be quoted).

While browsers are generally forgiving and will simply ignore an invalid background-color declaration, this means your intended styling silently fails. The element falls back to its inherited or default background, which can cause visual bugs, poor contrast, or accessibility issues that are hard to track down. Validating your CSS catches these problems early.

Valid color formats

The background-color property accepts these value types:

• Named keywords: red, blue, transparent, currentcolor, etc.
• Hex notation: #rgb, #rrggbb, #rgba, #rrggbbaa
• RGB/RGBA: rgb(255, 0, 0) or rgb(255 0 0 / 0.5)
• HSL/HSLA: hsl(120, 100%, 50%) or hsl(120 100% 50% / 0.5)
• The keyword inherit, initial, unset, or revert

Examples

Invalid: bare number as a color

A plain number like 0 is not a valid color value, even though black could be represented as all zeros in RGB.

<style>
  .banner {
    background-color: 0;
  }
</style>

Invalid: misspelled keyword

<style>
  .banner {
    background-color: trasparent;
  }
</style>

Invalid: quoted string

Color values must not be wrapped in quotes.

<style>
  .banner {
    background-color: "red";
  }
</style>

Invalid: malformed hex code

Hex codes must be 3, 4, 6, or 8 characters after the #.

<style>
  .banner {
    background-color: #12345;
  }
</style>

Fixed: using a named color keyword

<style>
  .banner {
    background-color: black;
  }
</style>

Fixed: using a hex color

<style>
  .banner {
    background-color: #000000;
  }
</style>

Fixed: using rgb() notation

<style>
  .banner {
    background-color: rgb(0, 0, 0);
  }
</style>

Fixed: using rgba() for semi-transparency

<style>
  .banner {
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>

Fixed: using hsl() notation

<style>
  .banner {
    background-color: hsl(210, 50%, 40%);
  }
</style>

Fixed: using transparent

<style>
  .banner {
    background-color: transparent;
  }
</style>

The background CSS property is a shorthand that can accept values for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. When the validator encounters an unrecognized value, it tries to match it against individual sub-properties like background-color. If the value doesn’t match any of them, you’ll see this error.

Common causes include typos in color names (e.g., bleu instead of blue), malformed hex codes (e.g., #gggggg or a missing #), incorrect function syntax (e.g., rgb(255 0 0 with a missing parenthesis), or using values that simply don’t exist in CSS. This error can also appear when a CSS custom property (variable) is used in inline styles and the validator can’t resolve it, or when a browser-specific value is used that isn’t part of the CSS specification.

Fixing this issue ensures your styles render predictably across browsers. While browsers are often forgiving and may ignore invalid declarations silently, relying on that behavior can lead to inconsistent rendering. Standards-compliant CSS is easier to maintain and debug.

How to Fix

1. Check for typos in color names, hex codes, or function syntax.
2. Verify the value format — hex colors need a # prefix, rgb() and rgba() need proper comma-separated or space-separated values with closing parentheses.
3. Use background-color instead of the shorthand background if you only intend to set a color. This makes your intent clearer and reduces the chance of conflicting shorthand values.
4. Remove vendor-prefixed or non-standard values that the validator doesn’t recognize.

Examples

Incorrect — Typo in color name

<div style="background: aquaa;">Content</div>

aquaa is not a valid CSS color name, so the validator rejects it.

Correct — Valid color name

<div style="background: aqua;">Content</div>

Incorrect — Malformed hex code

<div style="background: #xyz123;">Content</div>

Hex color codes only allow characters 0–9 and a–f.

Correct — Valid hex code

<div style="background: #00a123;">Content</div>

Incorrect — Missing hash symbol

<div style="background: ff0000;">Content</div>

Without the #, the validator interprets ff0000 as an unknown keyword.

Correct — Hex code with hash

<div style="background: #ff0000;">Content</div>

Incorrect — Broken rgb() syntax

<div style="background: rgb(255, 0, 300);">Content</div>

RGB channel values must be between 0 and 255 (or 0% to 100%).

Correct — Valid rgb() value

<div style="background: rgb(255, 0, 128);">Content</div>

Correct — Using background-color for clarity

When you only need to set a color, prefer the specific background-color property over the shorthand:

<div style="background-color: rgba(255, 0, 0, 0.5);">Semi-transparent red</div>

Correct — Valid shorthand with image and other properties

<div style="background: url('image.jpg') no-repeat center / cover;">Content</div>

Note the / between background-position (center) and background-size (cover) — this is required syntax in the shorthand.