Regex code couleur hexadécimal
La regex couleur hex la plus copiée (268 votes sur Stack Overflow) date de 2009, avant que CSS n'ajoute les formats #RGBA et #RRGGBBAA. Sa propre variante « ARGB » a un bug documenté : elle accepte des codes à 7 chiffres, invalides. Voici un motif couvrant les 4 longueurs valides du CSS actuel, comparé aux versions historiques.
/^#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})$/passe 20/20 cas
Comparatif des patterns existants
| Source | pattern | Score sur le 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 | sûr |
| Stack Overflow — variante « ARGB » de la même réponse (bug signalé en commentaire) | ^#(?:[0-9a-fA-F]{3,4}){1,2}$ | 18 / 20 | sûr |
| Stack Overflow — réponse alternative, 28 votes (MSalters), capture RVB explicitement | ^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$ | 18 / 20 | sûr |
Implémentation
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);Limites
- 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.