CSS: “background-color”: “X” is not a “background-color” value.

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>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing