Comment utiliser : Convertisseur HEX vers RGBA
- Saisissez ou collez un code HEX, par exemple
#ff6347, ou choisissez une couleur avec le sélecteur. - Faites glisser le curseur opacité (de 0 à 1) pour définir la transparence. L'aperçu en damier montre le résultat.
- Cliquez sur Copier à côté du format souhaité :
rgba(),rgb()moderne, HEX à 8 chiffres, HSLA ou OKLCH. - Collez une valeur
rgba()ou HEX à 8 chiffres pour convertir dans l'autre sens : le curseur reprend alors sa valeur alpha.
À quoi sert un convertisseur HEX vers RGBA ?
Un code HEX comme #FF6347 se compose de trois paires de chiffres hexadécimaux : rouge FF (255), vert 63 (99) et bleu 47 (71). Dans sa forme classique à six chiffres, le HEX ne permet pas de gérer la transparence. Lorsque vous avez besoin d'une superposition semi-transparente, d'une ombre ou d'un état au survol, convertissez la couleur en rgba(255, 99, 71, 0.5), où la quatrième valeur est le canal alpha, de 0 (invisible) à 1 (opaque).
Comment fonctionne la conversion
Chaque paire de deux chiffres passe de la base 16 à la base 10 : FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Les notations abrégées à trois chiffres, comme #f63, sont développées en doublant chaque chiffre (#ff6633). La valeur alpha choisie est ajoutée telle quelle.
Quelle syntaxe utiliser ?
| Syntaxe | Exemple | Remarques |
|---|---|---|
| rgba() classique | rgba(255, 99, 71, 0.5) | Fonctionne partout, y compris dans les très anciens navigateurs et les clients de messagerie. |
| rgb() moderne | rgb(255 99 71 / 50%) | CSS Color Level 4 : valeurs séparées par des espaces, alpha après une barre oblique. Pris en charge par tous les navigateurs actuels. |
| HEX à 8 chiffres | #ff634780 | La dernière paire correspond à l'alpha (80 en hexa = 128 ≈ 50 %). Pratique dans les outils de design et les champs de couleur de Webflow. |
| Variable de canaux | rgb(var(--color) / .5) | Stockez uniquement les canaux dans une propriété personnalisée et faites varier l'opacité selon l'usage. C'est le modèle utilisé par Tailwind. |
Opacité ou alpha ?
La propriété CSS opacity rend transparent un élément entier, y compris son texte et ses enfants. Un fond en RGBA ne rend transparente que la couleur elle-même : le texte qui se trouve par-dessus reste parfaitement lisible. Pour les superpositions sur des images et les cartes teintées, le RGBA (ou color-mix()) est généralement la solution attendue. Gardez à l'esprit que les couleurs de texte semi-transparentes modifient le contraste selon ce qui se trouve derrière elles. Vérifiez le résultat avec le Vérificateur de contraste.
Aussi recherché comme : hex vers rgb, rgba, opacité couleur css, transparence css, hex8, rgba vers hex, couleur hex avec alpha.
Outils complémentaires : Convertisseur HEX vers RGBA
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Convertisseur OKLCH — Explorez l’espace de couleur OKLCH, perceptuellement uniforme, grâce à des curseurs en temps réel.
- Mélangeur de couleurs — Choisissez deux couleurs et un nombre d’étapes pour obtenir des couleurs de transition régulièrement réparties, idéales pour les dégradés, les bordures, les graphiques et les états de survol.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
Questions fréquentes
Comment convertir manuellement du HEX en RGBA ?
#336699 à 70 % devient rgba(51, 102, 153, 0.7).Quelle est la valeur HEX d'une opacité de 50 % ?
80 en hexadécimal. Le noir à 50 % s'écrit donc #00000080. 25 % correspond à 40, et 75 % à BF.La fonction rgba() est-elle obsolète ?
rgba() comme un alias de rgb(), et les deux acceptent une valeur alpha. La syntaxe avec virgules reste prise en charge par tous les navigateurs.Puis-je reconvertir du RGBA en HEX ?
rgba() dans le champ de saisie. Vous obtenez le HEX opaque ainsi qu'un HEX à 8 chiffres qui intègre le canal alpha.