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)

Astuces

  • 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.

Questions fréquentes

Certains clients de messagerie (notamment certaines versions d'Outlook) et navigateurs anciens ne prennent absolument pas en charge la fonction CSS `rgba()` ni la transparence alpha. Dans ces environnements, la partie transparente peut s'afficher incorrectement et casser la mise en page. En précalculant la valeur RGB opaque résultant du mélange de votre couleur avec l'arrière-plan, vous pouvez indiquer un repli sûr pour les environnements où `rgba()` n'est pas disponible, évitant ainsi tout décalage visuel.

Une couleur semi-transparente porte à la fois sa propre information de couleur et l'information de l'arrière-plan qui transparaît à travers elle, si bien que le résultat visible dépend toujours de l'arrière-plan. La même couleur paraîtra plus sombre et plus terne sur du noir, et plus claire et plus douce sur du blanc. Ce n'est pas un bug, c'est simplement le fonctionnement de l'alpha blending — c'est pourquoi il faut impérativement indiquer la couleur d'arrière-plan réellement utilisée lors du calcul d'une couleur de repli.

Les valeurs alpha en CSS s'indiquent sous forme décimale de 0 (totalement transparent) à 1 (totalement opaque), ou de façon équivalente sous forme de pourcentage de 0 % à 100 %. Cet outil utilise un curseur sur la plage 0-100 % pour un réglage intuitif.

Tant qu'elle est affichée sur la couleur d'arrière-plan exacte que vous avez indiquée, elle paraîtra théoriquement identique. Cependant, cela ne vaut que pour cet arrière-plan précis : la placer sur un arrière-plan différent en changera l'apparence. Lorsque vous l'utilisez comme repli, il est important d'indiquer la couleur d'arrière-plan réelle de la page où la couleur apparaîtra.
ツールくん

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.

→ Voir toutes les anecdotes