Atelier visuel de regex

Construisez, importez, expliquez, testez et partagez des regex visuellement.

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.

Couleur hex courte

Valide les couleurs CSS hexadécimales à 3 chiffres comme #fff.

Pattern proposé

^#[0-9A-Fa-f]{3}$
Test rapide

Ce que ça matche

  • #fff
  • #09A

Limites connues

  • Accepte uniquement les couleurs à 3 chiffres.
  • N’accepte pas les couleurs à 6 chiffres.

Couleur hex longue

Valide les couleurs CSS hexadécimales à 6 chiffres comme #ffffff.

Pattern proposé

^#[0-9A-Fa-f]{6}$
Test rapide

Ce que ça matche

  • #ffffff
  • #1A2b3C

Limites connues

  • Accepte uniquement les couleurs à 6 chiffres.
  • N’accepte pas les formats courts comme #fff.

Couleur hex courte ou longue

Valide les couleurs CSS hexadécimales à 3 ou 6 chiffres.

Pattern proposé

^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$
Test rapide

Ce que ça matche

  • #fff
  • #ffffff

Limites connues

  • N’accepte pas les valeurs avec canal alpha.
  • Exige le symbole #.

Couleur hex avec alpha

Valide les couleurs CSS hexadécimales à 4 ou 8 chiffres avec transparence alpha.

Pattern proposé

^#(?:[0-9A-Fa-f]{4}|[0-9A-Fa-f]{8})$
Test rapide

Ce que ça matche

  • #ffff
  • #ffffff80

Limites connues

  • Accepte uniquement les formats avec alpha.
  • N’accepte pas les couleurs à 3 ou 6 chiffres.

Toute couleur hex CSS

Valide les couleurs CSS hexadécimales à 3, 4, 6 ou 8 chiffres.

Pattern proposé

^#(?:[0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$
Test rapide

Ce que ça matche

  • #fff
  • #ffff
  • #ffffff
  • #ffffff80

Limites connues

  • Exige le symbole #.
  • Ne valide pas les couleurs nommées comme red ou blue.

Couleur hex sans #

Valide les couleurs hexadécimales sans le symbole # au début.

Pattern proposé

^(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$
Test rapide

Ce que ça matche

  • fff
  • ffffff

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.