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

The color property, along with properties like background-color, border-color, and outline-color, expects values that conform to the CSS Color specification. The validator triggers this error when it encounters something that doesn’t match any valid color syntax. Common causes include:

• Plain numbers like 0 or 123 — numbers alone aren’t colors.
• Typos in color keywords such as grean instead of green, or trasparent instead of transparent.
• Malformed hex values like #GGG (invalid hex characters) or #12345 (wrong number of digits — hex colors must be 3, 4, 6, or 8 digits).
• Incorrect function syntax such as rgb(255 255 255 / 50) missing the % on the alpha value, or using legacy commas mixed with modern space-separated syntax.
• Missing units or hash symbols like 000000 instead of #000000.

This matters because browsers handle invalid color values unpredictably. Most will simply ignore the declaration entirely, which means the element inherits its color from a parent or falls back to the browser default — potentially making text unreadable against its background. Writing valid CSS ensures consistent rendering across all browsers and improves the maintainability of your code.

Valid CSS color formats

CSS supports several color formats:

Format	Example	Notes
Named colors	red, blue, transparent	148 predefined keywords
Hexadecimal	#ff0000, #f00	3, 4, 6, or 8 digits
rgb() / rgba()	rgb(255, 0, 0)	Comma or space-separated
hsl() / hsla()	hsl(0, 100%, 50%)	Hue, saturation, lightness
currentcolor	currentcolor	Inherits the current color value

Examples

Invalid: plain number as a color

A bare number is not a recognized color value:

<style>
  .example {
    color: 0;
  }
</style>

Invalid: typo in a color keyword

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

Invalid: hex value missing the # prefix

<style>
  .example {
    color: 000000;
  }
</style>

Invalid: hex value with wrong digit count

<style>
  .example {
    color: #12345;
  }
</style>

Fixed: using a named color keyword

<style>
  .example {
    color: black;
  }
</style>

Fixed: using a hexadecimal color

<style>
  .example {
    color: #000000;
  }
</style>

Fixed: using rgb()

<style>
  .example {
    color: rgb(0, 0, 0);
  }
</style>

Fixed: using hsl()

<style>
  .example {
    color: hsl(0, 0%, 0%);
  }
</style>

Fixed: using rgba() for semi-transparent color

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

Fixed: correcting the transparent keyword typo

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

If you’re unsure whether a value is valid, browser DevTools can help — most browsers will strike through or ignore invalid property values in the Styles panel, giving you a quick visual indicator of the problem.

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