Convertissez HEX et RGBA sans perdre la transparence
Un superposition solide, un octet alpha arrondi et une abréviation trompeuse : trois pièges du copier-coller des couleurs.
Si une couleur translucide devient opaque après l’avoir copiée, vérifiez quel format de sortie vous avez copié. Une couleur HEX à six chiffres contient rouge, vert et bleu ; elle n’a pas de canal alpha. Dans le convertisseur de couleurs, utilisez HEX · avec alpha, RGBA, HSLA ou CSS moderne si vous souhaitez conserver la transparence.
Essayez rgba(255, 136, 0, 0.5) dans Couleur à convertir. L’aperçu montre le même orange sur un damier, un fond blanc et un fond sombre. Les sorties opaques et translucides sont côte à côte, donc le choix est important.
Copier la sortie qui conserve l’alpha
Pour cette entrée, l’outil produit :
/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)
/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)
/* Alpha rounded to one byte */
#FF880080
Utilisez le bouton de copie à côté du format dont vous avez besoin. Copier les variables CSS fournit deux variables : --color est opaque et --color-alpha conserve la transparence avec la syntaxe RGB moderne. Choisir la première variable pour un calque superposé le rendra opaque même si la seconde variable est présente dans le même extrait.
Vous pouvez télécharger les exemples CSS et les tester dans votre propre feuille de style. La notation ne choisit pas votre élément ni la propriété CSS pour vous.
Pourquoi 50 % devient environ 50,2 % en HEX
Le CSS utilise les deux derniers chiffres d’une couleur HEX à huit chiffres pour l’alpha. 00 est totalement transparent et FF totalement opaque ; la référence HEX de MDN documente l’ordre et la syntaxe abrégée.
Il y a 256 valeurs possibles pour l’octet alpha. La moitié entre 0 et 255 est 127,5, donc ce convertisseur arrondit 50 % à 128, écrit 80. Lire cet octet donne 128 ÷ 255, soit environ 50,1961 %.
Collez #FF880080 dans l’entrée. L’outil affiche rgba(255, 136, 0, 0.501961). Ce petit changement est une quantification, pas un second réglage d’opacité. Gardez la forme décimale-alpha quand vous devez conserver exactement 0,5 ; les valeurs décimales affichées peuvent aussi être arrondies pour d’autres entrées.
Le HEX court peut cacher une différence plus grande
Ces entrées sont faciles à confondre :
| Entrée | HEX étendu avec alpha | Opacité |
|---|---|---|
#0F0 |
#00FF00FF |
100 % |
#0F08 |
#00FF0088 |
Environ 53,3333 % |
#00FF0080 |
#00FF0080 |
Environ 50,1961 % |
Chaque chiffre dans le HEX à quatre chiffres est doublé. Le dernier 8 devient 88, pas 80, donc la forme courte ci-dessus n’est pas un raccourci pour 50 %. Les résultats de conversion incluent ces trois entrées et l’exemple orange.
Vérifiez le fond avant de publier
Des valeurs de couleur identiques ne garantissent pas la même apparence sur toutes les surfaces. Les aperçus blanc et sombre du convertisseur vous aident à voir qu’un calque superposé dépend de ce qu’il y a derrière. Pour le texte, vérifiez aussi la paire texte/fond réelle ; notre guide de contraste explique cette vérification séparée.
Ce convertisseur gère les entrées HEX, RGB, HSL et HSV listées. Il ne résout pas les variables CSS, les couleurs nommées autres que transparent, ni les espaces colorimétriques large gamut. Sa sortie CMJN est une approximation sans profil d’impression, et la notation HSV/CMJN n’est pas une valeur CSS à coller dans une feuille de style.
Nous avons vérifié ces exemples avec l’outil le 21 octobre 2026. Le registre des résultats conserve les canaux analysés et les sorties formatées ; ce n’est pas un test d’étalonnage d’écran ou de couleur d’impression.