# CSS: “X”: Invalid RGB function.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-invalid-rgb-function
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A color written with `rgb()` or `rgba()` mixes the comma and space syntaxes, or is missing one of its values.

CSS has two ways to write `rgb()`, and a single function has to use one of them. The legacy syntax separates three or four values with commas, as in `rgb(0, 0, 0)` or `rgba(0, 0, 0, 0.5)`. The modern syntax separates the three channels with spaces and puts the alpha after a slash, as in `rgb(0 0 0 / 0.5)`. Values like `rgb(0, 0, 0 / 0.5)` and `rgb(0 0, 0)` combine the two, and `rgb(255, 0)` has only two channels. `rgb()` and `rgba()` are aliases, so either name works with either syntax.

The "X" in the message is the property that holds the color. It can be a regular property such as `color` or `box-shadow`, or a custom property such as `--tw-shadow`, which Tailwind CSS uses for box shadows. A browser drops a regular declaration with a broken color. A custom property keeps the value as written, and the problem shows up where `var()` reads it: the `box-shadow` that uses it becomes invalid, and the element has no shadow.

Rewrite the color in one syntax. If the value comes from a framework or from a build step such as a minifier, fix it there and rebuild, because the next build overwrites any edit to the generated file.

## Invalid example

```html
<style>
  .card {
    --card-shadow: 0 1px 3px rgb(0, 0, 0 / 0.1);
    box-shadow: var(--card-shadow);
  }
</style>
```

## Valid example

```html
<style>
  .card {
    --card-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
    box-shadow: var(--card-shadow);
  }
</style>
```