Regex hex color code
The most copied hex color regex (268 votes on Stack Overflow) dates from 2009, before CSS added the #RGBA and #RRGGBBAA formats. Its own "ARGB" variant has a documented bug: it accepts invalid 7-digit codes. Here's a pattern covering the 4 valid lengths of current CSS, compared against the historical versions.
/^#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})$/passes 20/20 cases
Comparison of existing patterns
| Source | pattern | Score on the corpus | ReDoS |
|---|---|---|---|
| Stack Overflow — réponse la plus votée, 268 votes (Joey), variante 3/6 chiffres | ^#(?:[0-9a-fA-F]{3}){1,2}$ | 18 / 20 | safe |
| Stack Overflow — variante « ARGB » de la même réponse (bug signalé en commentaire) | ^#(?:[0-9a-fA-F]{3,4}){1,2}$ | 18 / 20 | safe |
| Stack Overflow — réponse alternative, 28 votes (MSalters), capture RVB explicitement | ^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$ | 18 / 20 | safe |
Implementation
const re = new RegExp("^#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})$", "");
re.test(input);Limits
- Valide seulement la forme : n'indique pas si la couleur est réellement utilisée quelque part ni si elle respecte une charte graphique.
- Ne couvre pas les autres notations CSS de couleur (rgb(), hsl(), oklch(), noms de couleur comme « rebeccapurple ») : c'est un motif pour un seul format parmi plusieurs équivalents.
- N'exige pas le « # » en début — une chaîne « fff » sans dièse est rejetée à raison ici, mais certains contextes (attributs SVG, certains frameworks) acceptent aussi la forme sans dièse.
- Une couleur syntaxiquement valide peut rester invisible ou illisible selon son fond (ex. texte blanc sur fond blanc) : la forme ne dit rien du contraste réel.