Guide regex
Exemples de Regex Couleur Hex
La validation des couleurs hexadécimales est fréquente dans les outils CSS, design systems, éditeurs de thèmes et formulaires. Cette page propose plusieurs regex pratiques pour les formats courts, longs et avec transparence.
Pattern proposé
^#[0-9A-Fa-f]{3}$
Limites connues
- Accepte uniquement les couleurs à 3 chiffres.
- N’accepte pas les couleurs à 6 chiffres.
Pattern proposé
^#[0-9A-Fa-f]{6}$
Limites connues
- Accepte uniquement les couleurs à 6 chiffres.
- N’accepte pas les formats courts comme #fff.
Pattern proposé
^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$
Limites connues
- N’accepte pas les valeurs avec canal alpha.
- Exige le symbole #.
Pattern proposé
^#(?:[0-9A-Fa-f]{4}|[0-9A-Fa-f]{8})$
Limites connues
- Accepte uniquement les formats avec alpha.
- N’accepte pas les couleurs à 3 ou 6 chiffres.
Pattern proposé
^#(?:[0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$
Ce que ça matche
#fff
#ffff
#ffffff
#ffffff80
Limites connues
- Exige le symbole #.
- Ne valide pas les couleurs nommées comme red ou blue.
Pattern proposé
^(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$
Limites connues
- N’accepte pas le symbole #.
- N’accepte pas les valeurs alpha.
Qu’est-ce qu’une couleur hex ?
Une couleur hex est une valeur CSS écrite avec des chiffres hexadécimaux, généralement précédée du symbole #.
Les formats les plus courants sont #fff, #ffffff et les formats avec alpha comme #ffffff80.
Couleurs hex courtes et longues
Les couleurs hex courtes utilisent trois chiffres tandis que les couleurs longues en utilisent six.
Par exemple, #fff est un raccourci pour #ffffff et #000 pour #000000.
Couleurs hex avec transparence alpha
CSS moderne permet aussi d’utiliser des couleurs hex à 4 ou 8 chiffres, où la dernière partie représente la transparence alpha.
Cela permet par exemple d’écrire #ffffff80 pour représenter du blanc partiellement transparent.
Erreurs fréquentes de validation hex
Une erreur courante consiste à accepter n’importe quelle chaîne hexadécimale sans vérifier la longueur exacte.
Une autre erreur consiste à oublier si le symbole # doit être obligatoire ou optionnel.
Quand utiliser une regex couleur hex ?
Les regex de couleurs hex sont utiles dans les éditeurs de thèmes, générateurs CSS, outils de design, panneaux d’administration et formulaires.
Elles permettent de valider rapidement une couleur avant de l’enregistrer ou de l’appliquer à une interface.