Como o padrão funciona
| Parte | Significado |
|---|---|
^# | Começa com # |
[0-9a-fA-F]{3,4} | Forma curta: #rgb ou #rgba |
[0-9a-fA-F]{6} | Forma completa: #rrggbb |
[0-9a-fA-F]{8} | Forma completa com alfa: #rrggbbaa |
Exemplos 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;Observações e limitações
Todos os quatro tamanhos são CSS válido. Remova as alternativas {3,4} e {8} se o seu sistema aceitar apenas cores de seis dígitos. Converta entre formatos com o Conversor de Cores.
Testador de Expressões Regulares
Digite um padrão e veja as correspondências serem destacadas em tempo real no seu texto de teste.
Perguntas frequentes
Qual é a regex para código de cor hexadecimal?
/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ — ela corresponde à string inteira. Veja a tabela acima para entender o que cada parte faz.
Quais exemplos correspondem?
Dos exemplos testados, estes correspondem: #fff, #1A2B3C, #1a2b3c80, #f0f8. Os demais não.
Como testo essa regex?
Clique em “Abrir no Testador de Regex” — o padrão, as flags e o texto de exemplo carregam automaticamente, e as correspondências são destacadas conforme você edita.