Qu’est-ce qu’un code couleur hexadécimal ?

Un code couleur hexadécimal écrit une couleur sous forme de chiffres hexadécimaux, comme le font CSS et la plupart des outils de design. Dans #3b82f6, chaque paire de chiffres correspond à un canal : 3b représente le rouge, 82 le vert et f6 le bleu, de 00 (désactivé) à ff (intensité maximale). Une quatrième paire facultative définit l’alpha, ou l’opacité : #3b82f6cc correspond donc au même bleu avec une opacité de 80 %. Les codes dans lesquels chaque paire répète son chiffre peuvent être raccourcis à trois ou quatre chiffres : #ff8800 s’écrit donc également #f80.

Description de l’outil

Cet outil vous permet de modifier un code couleur hexadécimal paire par paire. Saisissez ou collez un code, sélectionnez une couleur ou collez-en une au format RGB, HSL ou dans un autre format, puis modifiez les paires correspondant aux canaux rouge, vert, bleu et alpha, ou l’opacité, et visualisez le résultat sur un damier de transparence. La couleur modifiée s’affiche dans les formats hexadécimaux utilisés par CSS, Android et le code, chacun étant prêt à être copié.

Fonctionnalités

  • Modifier des codes hexadécimaux à 3, 4, 6 ou 8 chiffres, avec ou sans #
  • Modifier chaque canal sous forme de paire hexadécimale à deux chiffres, et l’alpha sous forme de paire hexadécimale ou de pourcentage
  • Sélectionner une couleur ou en coller une au format RGB, HSL ou dans un autre format, tout en conservant l’alpha
  • Prévisualiser les couleurs transparentes sur un damier
  • Obtenir la couleur au format HEX à 6 chiffres, HEX à 8 chiffres, HEX court, rgb() ou rgba(), #AARRGGBB et 0xAARRGGBB
  • Basculer entre les chiffres hexadécimaux minuscules et majuscules
  • Fonctionne dans votre navigateur

Fonctionnement

Un code à 3 ou 4 chiffres est développé en doublant chaque chiffre, et un code sans paire alpha est entièrement opaque (ff). Un seul chiffre saisi dans un champ de canal est considéré comme un 0 suivi de ce chiffre : f devient donc 0f. Les pourcentages d’opacité sont arrondis à la valeur alpha la plus proche, comprise entre 0 et 255 : 80 % devient donc cc (204). Le format court n’existe que lorsque les deux chiffres de chaque paire sont identiques ; sinon, le champ correspondant reste vide.

Conseils

  • CSS lit la paire alpha en dernier (#RRGGBBAA), tandis que les ressources de couleur Android et .NET la placent en premier (#AARRGGBB) : sélectionnez donc les champs ARGB pour ces formats.
  • Laissez l’alpha à ff pour obtenir un code simple à 6 chiffres ; les champs à 8 chiffres et ARGB l’affichent tout de même dans son intégralité.