Error Valor de color hexadecimal inválido
Las únicas longitudes válidas de color hexadecimal en CSS (3, 4, 6 y 8 dígitos), y por qué cualquier otra cantidad no es un valor de color válido.
El validador marca cualquier valor de color con prefijo # cuya cantidad de dígitos no sea 3, 4, 6 u 8.
Ejemplo
/* Incorrecto: 5 dígitos no es una longitud válida */
color: #1a2b3;
/* Longitudes válidas */
color: #1a2; /* 3 dígitos — RGB abreviado */
color: #1a2f; /* 4 dígitos — RGB abreviado + alfa */
color: #1a2b3c; /* 6 dígitos — RGB completo */
color: #1a2b3cff; /* 8 dígitos — RGB completo + alfa */Por qué importa
Los colores hexadecimales empaquetan rojo, verde y azul (y opcionalmente alfa) en pares — o dígitos abreviados individuales — de caracteres hexadecimales, así que la longitud total tiene que dividirse en partes iguales entre esos 3 o 4 canales. Un valor de 5 dígitos como #1a2b3 no se puede dividir de forma pareja y no es CSS válido en absoluto; los navegadores descartan toda la declaración en la que aparece, en silencio, en vez de adivinar qué se quiso decir. Esto suele ser un error de tipeo — un dígito que se perdió o se agregó al editar — más que una elección deliberada.
Frequently asked questions
¿Qué pasa cuando un navegador encuentra un color hexadecimal inválido?
El navegador descarta toda la declaración como inválida — la propiedad simplemente no se aplica, recayendo en lo que sea que herede o su valor por defecto. No hay ningún error visible, por eso estos errores de tipeo son fáciles de pasar por alto.
¿Cuál es la diferencia entre hex de 3 dígitos y de 6 dígitos?
El de 3 dígitos es una abreviatura donde cada dígito se duplica — #1a2 se expande a #11aa22. Es una abreviatura conveniente solo cuando cada canal resulta ser un dígito repetido; cualquier otra cosa necesita la forma completa de 6 dígitos.