Ajoutez de la transparence à n'importe quelle couleur hex. Choisissez une opacité, copiez le hex à 8 chiffres, la valeur rgba, hsla ou Android, et voyez-la sur fond clair, sombre et en damier. Table alpha complète de 0 à 100%.
Pour rendre une couleur hex transparente, ajoutez deux chiffres hex pour l'alpha : #RRGGBBAA. Cette paire vaut l'opacité multipliée par 255, écrite en hexadécimal : 50% donne 80, 75% donne BF et 25% donne 40. Choisissez une couleur et une opacité ci-dessous pour obtenir le hex à 8 chiffres ainsi que les valeurs rgba et hsla correspondantes.
Valeurs d'opacité les plus utilisées
Opacité
Paire alpha
Exemple sur #4F98FB
BF
Choisissez une couleur, faites glisser le curseur d'opacité et copiez le format dont votre code a besoin. L'aperçu montre la couleur sur du blanc, du noir et un damier, ainsi que la couleur opaque qu'elle donne une fois mélangée sur chacun.
Saisissez ou choisissez une couleur de base. Le hex à trois, six et huit chiffres fonctionne ; une paire alpha existante règle le curseur.
Faites glisser le curseur ou saisissez un pourcentage de 0 à 100.
Copiez le hex à 8 chiffres, rgba(), la syntaxe moderne rgb() avec une barre oblique, hsla() ou la forme Android #AARRGGBB.
Vérifiez la couleur mélangée sur blanc et sur noir si vous avez besoin d'une couleur de repli opaque ou voulez tester le contraste du texte.
Les paires alpha sont arrondies, donc un pourcentage ne se retrouve pas toujours à l'identique. 80 en hex correspond à 128 sur 255, soit 50.2%, ce qui suffit largement pour n'importe quel écran.
Les ressources de couleur Android placent l'alpha en premier (#AARRGGBB), à l'inverse du CSS. Les intervertir est une raison fréquente pour laquelle une couleur paraît fausse dans une application.
Pour du texte, vérifiez le contraste avec la couleur mélangée, pas avec la couleur transparente. Un noir à 60% sur du blanc se lit très différemment d'un noir à 60% sur une photo.
N'utilisez la propriété opacity que si tout l'élément, enfants compris, doit s'estomper. Pour un fond translucide avec un texte opaque, placez plutôt l'alpha dans la couleur de fond.
Questions fréquentes
Tous les navigateurs prennent-ils en charge les couleurs hex à 8 chiffres ?
Oui. Les formes #RRGGBBAA et #RGBA viennent de CSS Color Level 4 et fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari. Les très vieux navigateurs les ignorent : ajoutez une valeur de repli rgba() seulement si vous les prenez encore en charge.
Comment convertir une opacité en hex ?
Multipliez l'opacité (de 0 à 1) par 255, arrondissez à l'entier et écrivez le résultat sur deux chiffres hex. Pour 30% : 0.3 fois 255 donne 76.5, arrondi à 77, soit 4D en hex. La table complète de cette page liste chaque palier de 5%.
#RRGGBBAA est-il identique à rgba() ?
Ils décrivent la même couleur. rgba(79, 152, 251, 0.5) et #4F98FB80 s'affichent de façon identique, à l'infime arrondi de l'alpha hex près. Choisissez celui que votre base de code utilise déjà.
Et le hex à 4 chiffres ?
Lire la paire alpha
Une paire hex va de 00 à FF, soit de 0 à 255. La paire alpha utilise la même échelle : 00 est totalement transparent et FF totalement opaque. C'est pourquoi les valeurs courantes semblent étranges au début : la moitié de 255 fait 127.5, donc 50% est arrondi à 128, soit 80 en hex.
Les designers exportent souvent les couleurs d'un fichier de design avec une valeur d'opacité séparée. La convertir en une seule valeur à 8 chiffres permet de l'insérer facilement dans un design token ou une config Tailwind.
Les couleurs transparentes dans Tailwind
Tailwind ajoute l'opacité avec une barre oblique après le nom de la couleur, par exemple bg-sky-500/50, ce qui fonctionne pour toutes les couleurs du thème. Pour une couleur personnalisée, une valeur arbitraire comme bg-[#4F98FB80] accepte directement le hex à 8 chiffres.
En coulisses, Tailwind 4 mélange la couleur avec transparent via color-mix(), et les versions plus anciennes utilisent rgb() avec un alpha. Le rendu à l'écran est le même que celui de la valeur hex fournie par cet outil.