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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-background-color-x-is-not-a-background-color-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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.

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

### Invalid: misspelled keyword

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

### Invalid: quoted string

Color values must not be wrapped in quotes.

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

### Invalid: malformed hex code

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

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

### Fixed: using a named color keyword

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

### Fixed: using a hex color

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

### Fixed: using `rgb()` notation

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

### Fixed: using `rgba()` for semi-transparency

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

### Fixed: using `hsl()` notation

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

### Fixed: using `transparent`

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