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

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

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:

```html
<!-- 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 `#`:

```html
<!-- 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:

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