Étendre hex abrégé

CSS et les outils de design écrivent souvent les couleurs en forme abrégée à trois chiffres, comme #f0a, plutôt qu’en forme complète à six chiffres #ff00aa. Les navigateurs étendent cette abréviation en doublant chaque chiffre hexadécimal afin que chaque canal devienne un octet complet. Cet outil d’expansion de couleur hex abrégée accepte un code à trois chiffres avec ou sans dièse initial, vérifie que chaque caractère est un chiffre hexadécimal et renvoie l’expansion déterministe à six chiffres ainsi que les entiers de canaux rouge, vert et bleu correspondants. Les développeurs front-end l’utilisent lorsque les jetons de design arrivent en codes courts et que feuilles de style, captures ou systèmes de design exigent la forme longue. Étudiants et scripts de QA s’en servent pour vérifier qu’une palette écrite à la main correspond octet par octet à la règle du CSS Color Module.

Ce que signifie l’abréviation à 3 chiffres et comment l’expansion fonctionne

En CSS, une couleur hexadécimale peut s’écrire avec trois chiffres après un dièse optionnel : un nibble pour le rouge, un pour le vert et un pour le bleu. La règle officielle d’expansion est simple et absolue : chaque chiffre est répété une fois de sorte que trois caractères deviennent six. Par exemple, #abc s’étend en #aabbcc, #f0a en #ff00aa et #000 en six zéros.

Cette règle n’est ni une heuristique ni une approximation perceptuelle ; c’est le même mappage que les navigateurs appliquent en analysant une feuille de style. Ce calculateur encode exactement ce mappage.

Vous fournissez une abréviation à trois chiffres, le moteur met les chiffres en minuscules pour une forme canonique stable, double chaque nibble et renvoie la chaîne complète avec dièse, les six chiffres sans dièse, une forme en majuscules pour les guides de style qui préfèrent A–F en capitales, l’abréviation normalisée à trois chiffres avec et sans dièse, un booléen indiquant si l’entrée portait un dièse initial, et les canaux entiers r, g et b de 0 à 255 afin d’alimenter le même coloris dans des outils RGB sans seconde conversion.

Aucun chemin n’invente un quatrième canal, ne préserve l’alpha ni ne traite les préfixes 0x comme des couleurs CSS valides. Utilisez un convertisseur dédié hex vers RGB ou multiformat lorsque vous avez déjà six chiffres et n’avez besoin que des numéros de canal ; utilisez cette page lorsque l’entrée est volontairement courte et que le travail consiste à matérialiser la forme longue avec un contrat de validation clair.

Où l’expansion d’un hex abrégé s’avère utile

Les systèmes de design reçoivent souvent des échantillons de marque sous forme de codes à trois chiffres issus de guides de style anciens, de plugins Figma ou de notes manuscrites, tandis que les pipelines de jetons modernes et les propriétés personnalisées CSS préfèrent des hachages à six chiffres pour le grepping, les diffs de captures et le mappage canal à canal. Étendre l’abréviation une seule fois à la frontière maintient tous les consommateurs en aval sur la forme longue sans que chaque équipe réimplémente légèrement différemment la règle de doublement.

Les supports pédagogiques de développement web introduisent tôt les couleurs à trois chiffres car elles sont faciles à saisir, puis demandent aux étudiants d’expliquer l’expansion ; un outil déterministe permet de montrer que #fff est blanc et que #f0a n’équivaut pas à inventer des chiffres manquants. Les pipelines de QA et d’accessibilité stockent parfois des couleurs en formats mixtes ; normaliser les codes courts en six chiffres avant les contrôles de contraste évite de faux écarts lorsqu’un côté a utilisé l’abréviation et l’autre la forme longue.

Associez cet expanseur à des convertisseurs RGB ou HSL lorsque vous avez besoin d’autres espaces, et gardez cette page centrée lorsque la seule tâche est de passer de trois chiffres à six sous un contrat de validation strict qui refuse les codes déjà longs et les caractères illégaux au lieu de deviner.