Les modes de fusion (blend modes)

Description.

Le mode de fusion définit comment deux couches qui se superposent doivent être combinées. Il peut s'agir d'un premier plan et d'un arrière-plan. Le premier plan est le contenu de l'élément. L'arrière-plan est à prendre au sens large, comme tout ce qui est visible derrière l'élément. Il peut s'agir de l'arrière-plan de l'élément lui-même, mais aussi celui de son ou ses parents.

Les modes de fusion sont exploités par deux propriétés :

mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément..
background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan..

Opacité et mode de fusion.

Par défaut, le premier-plan cache l'arrière-plan : il n'y a donc pas de mélange dans ce cas, l'arrière-plan n'étant visible que à travers les parties transparentes du premier plan. Cependant, si le premier plan est semi-transparent (opacity < 1) une forme de mélange simple est déjà mise en œuvre.

Un mode de fusion différent de normal peut être spécifié avec les propriétés mix-blend-mode ou background-blend-mode. Dans ce cas le résultat est obtenu par une formule calculant point par point les couleurs du résultat.

opacity:1;
mix-blend-mode:normal;

L'arrière-plan n'est visible que dans les parties transparentes du premier plan.

opacity:0.7;
mix-blend-mode:normal;

Le premier plan est semi-transparent : il y a mélange dans les parties non transparentes.

opacity:1;
mix-blend-mode:multiply;

Mode de fusion autre que normal.
Les deux plans se mélangent dans les parties non transparentes.

On retrouve un principe identique au mélange de calques dans Photoshop.

Calculs.

Ce chapitre peut facilement être ignoré. Il détaille les formules de calcul utilisées pour gérer la transparence d'un élément et/ou les modes de fusion. Vous pouvez vous reportez directement à la description des différents modes de fusion.

Les formules peuvent sembler complexes au premier regard, mais en fait elles n'utilisent que des opérations très simples, comme les quatre opérations de base : addition, multiplication, division et soustraction.

Décomposition des couleurs.

Toutes les couleurs existantes sont traduites par une combinaison de trois couleurs de base : rouge, vert et bleu (voir à ce sujet notre synthétiseur de couleurs). Cette combinaison peut être exprimée de différentes façons : codes hexadécimaux, valeurs décimales, pourcentages. C'est cette dernière écriture qui sera le plus pratique pour la suite de ces explications.

Bleu pur
#0000ff
rgb(0% 0% 100%)

Rouge pur
#ff0000
rgb(100% 0% 0%)

Bleu clair
#ADD8E6
rgb(68% 85% 90%)

Gris
#808080
rgb(50% 50% 50%)

Traitement de la transparence.

Si la couleur du premier plan n'est pas totalement opaque, la couleur d'arrière-plan sera un peu visible à travers. La formule pour obtenir la couleur résultante est la suivante :

r = bk x (1 - α) + c1 x α

r = Composante de la couleur du résultat (rouge vert, ou bleu).
bk = Composante de la couleur de l'arrière-plan.
c1 = Composante de la couleur du premier plan.
α = Opacité du premier plan.

Première couleur (arrière-plan)
rgb(100% 80% 0%)

Rouge	=	1
Vert	=	0.8
Bleu	=	0
Opacité	=	1

Deuxième couleur (1er plan)
rgb(0% 75% 100% / 40%)

Rouge	=	0
Vert	=	0.75
Bleu	=	1
Opacité	=	0.4

Résultat
rgb(60% 78% 40%)

R	=	1 x 0.6 + 0 x 0.4	=	0.6
V	=	0.8 x 0.6 + 1 x 0.4	=	0.78
B	=	0 x 0.6 + 1 x 0.4	=	0.4

Mode de fusion.

Pour mélanger deux couleurs, on applique une formule sur les trois composantes de chacune des couleurs. Cette formule est définie par le mode de fusion choisi. Prenons l'exemple du mode de fusion multiply :

Première couleur
rgb(90% 80% 60%)

Rouge	=	0.9
Vert	=	0.8
Bleu	=	0.6

Deuxième couleur
rgb(50% 80% 90%)

Rouge	=	0.5
Vert	=	0.8
Bleu	=	0.9

Résultat
rgb(45% 64% 54%)

R	=	0.9 x 0.5	=	0.45
V	=	0.8 x 0.8	=	0.64
B	=	0.6 x 0.9	=	0.54

Chacun des résultats est ensuite limité à la plage valide, soit entre 0% et 100%. Remarque : avec le mode multiply cette plage ne peut pas être dépassée, mais d'autres modes de fusion pourraient donner des résultats en dehors des limites.

Voyons maintenant ce qui se passe quand on utilise à la fois une couleur semi-transparentes et un mode de fusion. Le calcul de transparence (voir plus haut) s'applique après, sur le résultat du calcul de fusion.

Première couleur
rgb(90% 80% 60%)

Rouge	=	0.9
Vert	=	0.8
Bleu	=	0.6
Opacité	=	1

Deuxième couleur
rgb(50% 80% 90% / 40%)

Rouge	=	0.5
Vert	=	0.8
Bleu	=	0.9
Opacité	=	0.4

Résultat
rgb(72% 73.6% 57.6%)

R	=	0.9x0.6 + 0.45x0.4	=	0.720
V	=	0.8x0.6 + 0.64x0.4	=	0.736
B	=	0.6x0.6 + 0.54x0.4	=	0.576

Modes de fusion (`blend-mode`) agissant sur les composantes RVB.

Dans les formules qui suivent...

bk est une des composantes de la couleur d'arrière-plan (rouge, vert ou bleu).
c1 est une des composantes de la couleur du premier plan (rouge vert ou bleu).
r est la composante correspondante dans la couleur du résultat.

Si la couleur du premier plan n'est pas totalement opaque, il faut compléter les formules en faisant intervenir l'opacité du premier plan. Exemple pour le mode de fusion multiply :

r = bk x c1 x α + bk x (1 - α)

normal

Ce mode est le mode par défaut. Il n'y a pas de combinaison : le premier plan masque l'arrière-plan. Ce dernier peut cependant être visible dans les parties transparentes ou semi-transparentes du premier plan.

r = c1

#a0a0a0

#8080ff
lighten

Choisit pour résultat la composante la plus élevée. Si le rouge de l'arrière-plan à une valeur de 27, et que celui du premier plan à une valeur de 15, le rouge du résultat aura une valeur de 27. La même logique est appliquée aux composantes vert et bleu.

Ceci ne veut pas dire que l'on retrouve l'une des deux couleurs dans le résultat, car l'une des composantes (rouge, vert ou bleu) peut être le plus grand sur la couleur du fond, et une autre composante plus grand sur la couleur de premier plan.

r = max(bk, c1)

#a0a0a0

#8080ff
darken

Choisit pour résultat la composante la moins élevée. C'est l'inverse de lighten. La même logique est appliquée aux trois composantes rouge, vert et bleu.

Comme pour lighten, on ne retrouve pas une des deux couleurs dans le résultat car une des composantes (rouge, vert ou bleu) peut être la plus petite sur le fond, et une autre composante plus petite sur le premier plan.

r = min(bk, c1)

#a0a0a0

#8080ff
multiply

Les composantes R,V,B de la couleur de l'arrière-plan sont multipliées avec celles de la couleur du premier plan.

La couleur résultat sera plus foncée que chacune des deux couleurs fusionnées. Avec ce mode de fusion, la couleur neutre est le blanc : si l'une des deux couleurs est blanche, le résultat est identique à l'autre couleur. A l'inverse, si l'une des couleurs est le noir, le résultat sera noir, quelque soit la deuxième couleurs.

r = bk x c1

#a0a0a0

#8080ff
difference

Les composantes R,V,B de la couleur de l'arrière-plan sont soustraites de celles de la couleur du premier plan. Les résultats négatifs sont inversés (valeur absolue).

Pour le mode de fusion difference, la couleur neutre est le noir. Le code du noir étant 0,0,0, on comprend que soustraire 0 d'une couleur quelconque ne change pas cette couleur.
La couleur blanche donne en résultat le négatif de l'autre couleur.

r = |bk - c1|

#a0a0a0

#8080ff
screen

Ce mode de fusion effectue les calculs suivants :
1. Calcule les complémentaires des composantes de la couleur d'arrière-plan.
2. Idem pour la couleur de premier plan.
3. Multiplie ces complémentaires entre eux.
4. Prend la complémentaire du résultat.
Avec le mode de fusion screen, la couleur neutre est le noir : une couleur fusionnée avec du noir n'est pas modifiée. Le blanc est une couleur absorbante : toute couleur fusionnée avec du blanc donne du blanc.

r = 1 - ((1 - bk) x (1 - c1))

#a0a0a0

#8080ff
exclusion

Donne un rendu similaire au mode de fusion difference mais avec moins de contraste.

La couleur neutre est le noir pour le mode de fusion exclusion. Le blanc inverse l'autre couleur (négatif).

r = bk + c1 - 2 x bk x c1

#a0a0a0

#8080ff
hard-light

Le mode de fusion hard-light applique un traitement différent suivant la valeur de la composante du premier plan.

if(c1 <= 0.5) r = bk x c1 x 2 else r = 1 - ((1 - bk) x (-2 x c1))

#a0a0a0

#8080ff
soft-light

Le mode de fusion soft-light utilise des formules nettement plus complexes.

if(c1 <= 0.5) r = bk - (1 - 2 x c1) x bk x (1 - c1) elseif(c1 <= 0.25) r = bk + (2 x c1 - 1) x (((16 x bk - 12) x bk + 4) x bk - bk) else r = bk + (2 x c1 - 1) x (sqrt(bk) - bk)

#a0a0a0

#8080ff
overlay

Le mode de fusion overlay applique un traitement symétrique à celui de hard-light, c'est à dire qu'il utilise les mêmes formules mais en inversant bk et c1.

if(bk <= 0.5) r = bk x c1 x 2 else r = 1 - ((1 - c1) x (-2 x bk))

#a0a0a0

#8080ff
color-dodge

Ce mode de fusion éclaircit la couleur de l'arrière-plan, en fonction de la couleur du premier plan.

La formule de fusion du mode color-dodge peut conduire à une division par zéro. Pour cette raison, si l'une des composantes de la couleur de premier plan est le blanc, on force la composante de la couleur du résultat à blanc également.

if(c1 == 1) r = 1 else r = min(1, bk / (1 - c1))

#a0a0a0

#8080ff
color-burn

Ce mode de fusion assombrit la couleur de l'arrière-plan, en fonction de la couleur du premier plan. C'est donc le contraire du mode color-burn.

Comme celle de color-burn, la formule de color-dodge peut conduire à une division par zéro. Pour cette raison, si l'une des composantes de la couleur de premier plan est le noir, on force la composante de la couleur du résultat à noir.

if(c1 == 0) r = 0 else r = 1 - min(1, (1 - bk) / c1)

#a0a0a0

#8080ff

Modes de fusion agissant sur la décomposition HSL des couleurs.

Les couleurs peuvent être définies par leurs composantes RVB (Rouge, Vert, Bleu) comme nous l'avons vu, mais aussi par trois autres paramètres qui sont la teinte, la saturation et la luminosité (système HSL). Voir le synthétiseur de couleurs.

Les modes de fusions présentés ci-dessous travaillent sur les paramètres HSL des couleurs.

hue

Le mode de fusion hue crée une couleur en utilisant la teinte de la couleur du premier plan avec la luminosité et la saturation de la couleur de l'arrière-plan.

#a0a0a0

#8080ff
saturation

Le mode de fusion saturation crée une couleur en utilisant la saturation de la couleur du premier plan avec la luminosité et la teinte de la couleur de l'arrière-plan.

#a0a0a0

#8080ff
luminosity

Le mode de fusion luminosity crée une couleur en utilisant la luminosité de la couleur du premier plan avec la teinte et la saturation de la couleur de l'arrière-plan.

#a0a0a0

#8080ff
color

Le mode de fusion color crée une couleur en utilisant la teinte et la saturation de la couleur du premier plan avec la luminosité de la couleur de l'arrière-plan.

#a0a0a0

#8080ff

Support et compatibilité des navigateurs.

Les modes de fusion (mélange de plusieurs couches superposées) sont bien supportés par tous les grands navigateurs actuels. Les modes de fusion peuvent être mis en oeuvre avec les propriétés mix-blend-mode et background-blend-mode.

Colonne 1

Supoprt du mélange entre les couches.

Colonne 2

Compatibilité des navigateurs avec la propriété mix-blend-mode qui assure le mélange entre le premier plan et l'arrière-plan.

Colonne 3

Support de la valeur plus-darker appliquée à la propriété mix-blend-mode.

Colonne 4

Compatibilité des navigateurs avec la propriété mix-blend-mode appliquée à des éléments SVG.

Modes de
fusion

Propriété
mix-blend-mode

Valeur
plus-darker

Sur des
éléments SVG