Raccourcisseur couleur HEX (CSS)

En CSS, les couleurs hexadécimales peuvent être exprimées en deux formats : le format long (#rrggbb, 6 chiffres hexadécimaux) et le format court (#rgb, 3 chiffres). Le format court est possible uniquement lorsque chaque paire de chiffres du format long est identique : #ffffff peut s'écrire #fff, #112233 peut s'écrire #123, mais #3b82f6 ne peut pas être raccourci car ses paires (3b, 82, f6) ne sont pas identiques.

Le format court est équivalent au format long : chaque chiffre du format court est doublé. Ainsi #abc correspond à #aabbcc, et #fff à #ffffff (blanc pur). Ces deux notations sont supportées par tous les navigateurs modernes depuis les débuts du CSS.

Le format court permet de réduire la taille du code CSS, ce qui contribue marginalement à la réduction de la taille des fichiers. En CSS minifié, les outils de compression (PostCSS, cssnano) remplacent automatiquement les couleurs longues par leur équivalent court quand c'est possible. Pour les équipes qui écrivent du CSS manuellement, préférer le format court quand il est disponible est une bonne pratique de concision.

Des outils comme Tailwind CSS, Sass ou Less génèrent du CSS optimisé automatiquement. Pour les designers qui définissent des palettes de couleurs manuellement, ce convertisseur permet de vérifier rapidement si une couleur peut être notée en format court, et d'obtenir un aperçu visuel de la couleur.