HTML Guides for rgb

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

<style>

.card {

--card-shadow: 0 1px 3px rgb(0, 0, 0 / 0.1);

box-shadow: var(--card-shadow);

}

</style>

Valid example

<style>

.card {

--card-shadow: 0 1px 3px rgb(0 0 0 / 0.1);

box-shadow: var(--card-shadow);

}

</style>