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

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

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:

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

### Invalid: typo in a color keyword

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

### Invalid: hex value missing the `#` prefix

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

### Invalid: hex value with wrong digit count

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

### Fixed: using a named color keyword

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

### Fixed: using a hexadecimal color

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

### Fixed: using `rgb()`

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

### Fixed: using `hsl()`

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

### Fixed: using `rgba()` for semi-transparent color

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

### Fixed: correcting the `transparent` keyword typo

```html
<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.