Cómo funciona el patrón
| Parte | Significado |
|---|---|
^# | Empieza con # |
[0-9a-fA-F]{3,4} | Forma corta: #rgb o #rgba |
[0-9a-fA-F]{6} | Forma completa: #rrggbb |
[0-9a-fA-F]{8} | Forma completa con alfa: #rrggbbaa |
Ejemplos de código
JavaScript
const re = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
re.test(value); // true or falsePython
import re
bool(re.fullmatch(r'#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})', value))PHP
preg_match('/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/', $value) === 1;Notas y limitaciones
Las cuatro longitudes son válidas en CSS. Elimina las alternativas {3,4} y {8} si tu sistema solo acepta colores de seis dígitos. Convierte entre formatos con el Conversor de color.
Probador de expresiones regulares
Escribe un patrón y observa cómo se resaltan las coincidencias en tiempo real en tu texto de prueba.
Preguntas frecuentes
¿Cuál es la regex para código de color hexadecimal?
/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ — coincide con la cadena completa. Consulta la tabla de arriba para ver qué hace cada parte.
¿Qué ejemplos coinciden?
De los ejemplos probados, coinciden estos: #fff, #1A2B3C, #1a2b3c80, #f0f8. Los demás no.
¿Cómo pruebo esta regex?
Haz clic en “Abrir en el Probador de Regex”: el patrón, las banderas y el texto de muestra se cargan automáticamente, y las coincidencias se resaltan mientras editas.