Regex pour code couleur hexadécimal

Utilisez /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ pour vérifier qu'une chaîne entière est un code couleur hexadécimal valide. Chaque exemple ci-dessous a été testé avec ce motif, et vous pouvez l'ouvrir dans le testeur de regex avec les échantillons préchargés.

Mis à jour le

/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
Ouvrir dans le testeur de regex
EntréeRésultat
#fff✓ Correspondance
#1A2B3C✓ Correspondance
#1a2b3c80✓ Correspondance
#f0f8✓ Correspondance
1a2b3c✗ Aucune correspondance
#12345✗ Aucune correspondance
#ggg✗ Aucune correspondance
#1234567✗ Aucune correspondance

Fonctionnement du motif

PartieSignification
^#Commence par #
[0-9a-fA-F]{3,4}Forme courte : #rgb ou #rgba
[0-9a-fA-F]{6}Forme complète : #rrggbb
[0-9a-fA-F]{8}Forme complète avec alpha : #rrggbbaa

Exemples de code

JavaScript

const re = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
re.test(value); // true or false

Python

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;

Remarques et limites

Les quatre longueurs sont valides en CSS. Supprimez les alternatives {3,4} et {8} si votre système n'accepte que les couleurs à six chiffres. Convertissez entre les formats avec le Convertisseur de couleurs.

Questions fréquentes

Quelle est la regex pour un code couleur hexadécimal ?
/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/ — elle correspond à la chaîne entière. Consultez le tableau ci-dessus pour le rôle de chaque partie.
Quels exemples correspondent ?
Parmi les exemples testés, ceux-ci correspondent : #fff, #1A2B3C, #1a2b3c80, #f0f8. Les autres ne correspondent pas.
Comment tester cette regex ?
Cliquez sur « Ouvrir dans le testeur de regex » : le motif, les indicateurs et le texte d'exemple se chargent automatiquement, et les correspondances s'affichent en surbrillance au fil de vos modifications.