Convertisseur RGBA vers RGB (fusion avec l'arrière-plan)
Indiquez une couleur de premier plan semi-transparente (RGBA) et une couleur d'arrière-plan pour calculer la couleur RGB opaque résultant de leur fusion par alpha blending, idéale comme couleur de repli lorsque rgba() n'est pas prise en charge.
La formule de l'alpha blending
La conversion de RGBA en RGB opaque est appelée « alpha blending » (l'opérateur « over »). La formule suivante est appliquée indépendamment aux canaux R, G et B, puis le résultat est arrondi à l'entier le plus proche.
| Formule | result = foreground × alpha + background × (1 − alpha) |
|---|
Ce que signifie convertir du RGBA en RGB
Une couleur RGBA semi-transparente fonctionne très bien dans le CSS moderne et les outils de conception, mais elle ne s'affiche pas comme prévu dans les environnements incapables d'interpréter la transparence, comme de nombreux clients de messagerie et d'anciens moteurs de rendu. Cet outil prend une couleur de premier plan (RGBA) et une couleur d'arrière-plan, puis calcule la couleur RGB opaque et fusionnée qui serait réellement visible une fois les deux composées — le résultat étant fourni sous une forme directement utilisable comme repli dans les environnements où la transparence n'est pas prise en charge.
Le calcul repose sur une méthode de composition appelée « alpha blending » (l'opérateur « over ») : chaque canal (R, G et B) de la couleur de premier plan est multiplié par la valeur alpha, chaque canal correspondant de la couleur d'arrière-plan est multiplié par (1 − valeur alpha), puis les deux produits sont additionnés. Comme cette formule s'applique indépendamment à chacun des trois canaux, une même couleur semi-transparente donne un résultat totalement différent selon l'arrière-plan sur lequel elle est placée. Lors de la préparation d'une couleur de repli, il est essentiel d'indiquer exactement la couleur d'arrière-plan sur laquelle l'élément sera réellement affiché.
Comment utiliser le convertisseur RGBA vers RGB
- Indiquer la couleur de premier plan (semi-transparente) Choisissez-la avec le sélecteur de couleur, ou collez un code HEX déjà confirmé dans un outil de conception.
- Ajuster l'opacité (valeur alpha) Réglez la transparence avec le curseur de 0 à 100 %. Faites correspondre cette valeur à celle réellement utilisée dans votre CSS.
- Indiquer la couleur d'arrière-plan Utilisez les boutons prédéfinis blanc ou noir, ou saisissez une valeur personnalisée proche de l'arrière-plan réel de votre page.
- Vérifier le résultat fusionné (RGB opaque) Le code HEX et la chaîne RGB sont calculés instantanément, avec une comparaison directe de l'aspect de la couleur sur fond blanc et sur fond noir.
- Coller la valeur RGB calculée comme repli Copiez-la directement dans des propriétés telles que `background-color`, où `rgba()` n'est pas pris en charge.
Astuces pour en tirer le meilleur parti
- Certains modèles d'e-mails HTML et navigateurs anciens (comme certaines versions d'IE) ne prennent parfois pas en charge `rgba()` ni `opacity`. Indiquer en plus la valeur RGB opaque calculée ici comme `background-color` constitue un repli sûr.
- La couleur de premier plan et celle d'arrière-plan acceptent aussi bien le sélecteur de couleur que la saisie directe du code HEX, ce qui permet de coller une couleur exacte déjà choisie dans un outil de conception.
- L'opacité (valeur alpha) se règle avec un curseur de 0 à 100 %. 0 % correspond à une transparence totale (c'est-à-dire uniquement la couleur d'arrière-plan), et 100 % à une opacité totale (c'est-à-dire uniquement la couleur de premier plan).
- Le blanc et le noir sont proposés comme arrière-plans prédéfinis car ce sont les deux cas les plus souvent comparés en pratique (arrière-plans en mode clair et en mode sombre). Pour une couleur de repli plus précise, saisissez comme valeur personnalisée la couleur d'arrière-plan réellement utilisée sur votre page.
Cas d'usage de la conversion RGBA vers RGB
Couleurs de repli d'arrière-plan pour les e-mails HTML
Pour les clients de messagerie qui n'interprètent pas `rgba()` — dont certaines versions d'Outlook —, vous pouvez indiquer à l'avance une valeur RGB opaque déjà calculée comme `background-color`.
Valeurs de couleur pour anciens navigateurs ou export PDF
Précalculez la couleur à transmettre à des moteurs de rendu qui ne prennent pas en charge la transparence, ou à des outils d'export PDF qui ignorent les valeurs alpha CSS.
Vérifier des combinaisons de couleurs dans une maquette
Découvrez précisément, sous forme de valeur exacte, la couleur obtenue en superposant des éléments semi-transparents, sans avoir à ouvrir Photoshop ou un autre éditeur.
Vérifier le rendu en mode clair comme en mode sombre
Utilisez les arrière-plans prédéfinis blanc et noir pour comparer en une seule fois comment la même couleur semi-transparente évolue dans les deux thèmes.
Créer une variante semi-transparente figée d'une couleur de marque
Exportez une couleur de marque avec une valeur alpha donnée comme couleur finale et fixe sur un arrière-plan précis, prête à intégrer dans une charte graphique.
Glossaire
- RGBA
- Un format de couleur qui ajoute un canal alpha — représentant l'opacité — aux trois canaux primaires rouge, vert et bleu. En CSS, il s'écrit par exemple `rgba(255, 0, 0, 0.5)`.
- Valeur alpha
- Un nombre exprimant l'opacité d'une couleur, indiqué sous forme décimale de 0 (totalement transparent) à 1 (totalement opaque), ou de façon équivalente en pourcentage. Plus la valeur est basse, plus l'arrière-plan transparaît.
- Alpha blending
- Le calcul qui mélange une couleur de premier plan semi-transparente avec une couleur d'arrière-plan, dans une proportion déterminée par la valeur alpha, pour produire une seule couleur opaque. Aussi appelé opérateur « over », il constitue la base de la formule utilisée par cet outil.
- Code couleur hexadécimal (HEX)
- Une représentation des valeurs des canaux RGB écrite en hexadécimal sous la forme `#RRGGBB`. L'une des façons les plus répandues d'indiquer une couleur en CSS et dans les outils de conception.
- Couleur de repli
- Une valeur alternative préparée à l'avance pour les cas où la représentation réellement souhaitée — ici une couleur semi-transparente — n'est pas interprétée correctement dans un environnement donné.
- Opérateur over
- La forme la plus élémentaire de l'alpha blending, qui consiste à placer une couleur de premier plan « par-dessus » une couleur d'arrière-plan. C'est exactement la formule que met en œuvre cet outil.
Questions fréquentes
Anecdote — Les origines de l'alpha blending
Le concept d'alpha blending (compositing alpha) est généralement attribué à un article de 1984 intitulé « Compositing Digital Images », publié par Thomas Porter et Tom Duff dans le domaine de l'infographie. Auparavant, la composition d'un premier plan sur un arrière-plan ne traitait généralement que l'information de couleur. Cet article a systématisé l'idée d'associer un quatrième canal représentant l'opacité — le canal alpha — aux données de couleur, devenant depuis le modèle standard utilisé en infographie et dans les logiciels de retouche d'image.
Aujourd'hui, presque toutes les technologies gérant la transparence reposent sur cette idée d'alpha blending : les formats d'image comme PNG et SVG, les fonctions CSS `rgba()`/`opacity`, ainsi que les fonctions de calques de la plupart des logiciels de dessin. La méthode de composition la plus élémentaire, appelée opérateur « over » (superposer un premier plan à un arrière-plan), correspond exactement à la formule utilisée par cet outil.
Les problèmes de compatibilité avec les anciens clients de messagerie et navigateurs hérités ne sont cependant toujours pas totalement résolus aujourd'hui. Les e-mails HTML en particulier sont fortement contraints par les moteurs de rendu, et les techniques modernes de transparence CSS ne peuvent souvent pas être utilisées telles quelles — c'est pourquoi précalculer une couleur de repli opaque reste une technique pratique largement utilisée.