CSS: “color”: X is not a valid color 3 or 6 hexadecimals numbers.

Hexadecimal color values in CSS must follow a specific format: the # symbol followed by exactly 3 or 6 hexadecimal digits. Each digit can be a number from 0 to 9 or a letter from A to F (case-insensitive). A 3-digit hex code is shorthand where each digit is expanded by duplication — for example, #F00 is equivalent to #FF0000. Common mistakes that trigger this error include using the wrong number of digits (e.g., 1, 2, 4, or 5), including non-hexadecimal characters (like G, Z, or special symbols), or omitting the # prefix.

The color CSS property sets the foreground color of an element’s text and text decorations. It also establishes the currentcolor value, which acts as an indirect value for other properties like border-color. Because color cascades to many visual aspects of an element, an invalid value can cause the entire declaration to be ignored, meaning the element may inherit an unexpected color or fall back to browser defaults.

This matters for consistency across browsers. While some browsers may attempt to guess what you meant with a malformed hex code, others will discard the value entirely. This leads to unpredictable rendering. Using valid color values ensures your styles are applied reliably everywhere.

Note that CSS also supports 4-digit and 8-digit hex values (which include an alpha/transparency channel, e.g., #F00A or #FF0000AA). However, the W3C validator’s inline style checker may not recognize these newer formats depending on the CSS level being validated. If you need transparency, consider using the rgba() function for broader validation compatibility.

Examples

Invalid hex color values

These examples will trigger the validation error:

<!-- Only 1 digit -->

<p style="color: #F;">Hello</p>

<!-- Only 2 digits -->

<p style="color: #FF;">Hello</p>

<!-- 4 digits (may not pass older CSS validation) -->

<p style="color: #FF00;">Hello</p>

<!-- 5 digits -->

<p style="color: #FF000;">Hello</p>

<!-- Non-hexadecimal character "G" -->

<p style="color: #FG0000;">Hello</p>

<!-- Missing the # prefix -->

<p style="color: FF0000;">Hello</p>

Valid hex color values

Use exactly 3 or 6 hexadecimal digits after the #:

<!-- 3-digit shorthand for red -->

<p style="color: #F00;">Hello</p>

<!-- 6-digit full form for red -->

<p style="color: #FF0000;">Hello</p>

<!-- 3-digit shorthand for white -->

<p style="color: #FFF;">Hello</p>

<!-- 6-digit full form for a dark gray -->

<p style="color: #333333;">Hello</p>

<!-- Lowercase is also valid -->

<p style="color: #3a7bd5;">Hello</p>

Alternative color formats

If hex values are causing issues, CSS offers several other valid ways to specify colors:

<!-- Named color -->

<p style="color: red;">Hello</p>

<!-- RGB function -->

<p style="color: rgb(255, 0, 0);">Hello</p>

<!-- RGBA function (with transparency) -->

<p style="color: rgba(255, 0, 0, 0.5);">Hello</p>

<!-- HSL function -->

<p style="color: hsl(0, 100%, 50%);">Hello</p>

Más información:

MDN Reference

MDN: CSS color

→