Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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 = ap x (1 - α) + pp x α

r = Couleur du résultat.
ap = Couleur de l'arrière-plan.
pp = 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 (premier plan)
rgba(0%, 75%, 100%, 0.4)
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 pour chacune des couleurs, 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 et sur le résultat du calcul de fusion.

Première couleur
rgba(90%, 80%, 60%, 1)
Rouge =0.9
Vert =0.8
Bleu =0.6
Opacité =1
Deuxième couleur
rgba(50%, 80%, 90%, 0.4)
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...

  • ap est une des composantes de la couleur d'arrière-plan (rouge, vert ou bleu).
  • pp 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 = ap x pp x α + ap x (1 - α)

  • normal
    #a0a0a0
    #8080ff

    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 = pp
  • lighten
    #a0a0a0
    #8080ff

    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.

    r = max(ap, pp)
  • darken
    #a0a0a0
    #8080ff

    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.

    r = min(ap, pp)
  • multiply
    #a0a0a0
    #8080ff

    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.

    r = ap x pp
  • difference
    #a0a0a0
    #8080ff

    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 = |ap - pp|
  • screen
    #a0a0a0
    #8080ff

    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 - ap) x (1 - pp))
  • exclusion
    #a0a0a0
    #8080ff

    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 = ap + pp - 2 x ap x pp
  • hard-light
    #a0a0a0
    #8080ff

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

    if(pp <= 0.5) r = ap x pp x 2 else r = 1 - ((1 - ap) x (-2 x pp))
  • soft-light
    #a0a0a0
    #8080ff

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

    if(pp <= 0.5) r = ap - (1 - 2 x pp) x ap x (1 - ap) elseif(pp <= 0.25) r = ap + (2 x pp - 1) x (((16 x ap - 12) x ap + 4) x ap - ap) else r = ap + (2 x pp - 1) x (sqrt(ap) - ap)
  • overlay
    #a0a0a0
    #8080ff

    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 ap et pp.

    if(ap <= 0.5) r = ap x pp x 2 else r = 1 - ((1 - pp) x (-2 x ap))
  • color-dodge
    #a0a0a0
    #8080ff

    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(pp == 1) r = 1 else r = min(1, ap / (1 - pp))
  • color-burn
    #a0a0a0
    #8080ff

    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(pp == 0) r = 0 else r = 1 - min(1, (1 - ap) / pp)

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
    #a0a0a0
    #8080ff

    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.

  • saturation
    #a0a0a0
    #8080ff

    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.

  • luminosity
    #a0a0a0
    #8080ff

    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.

  • color
    #a0a0a0
    #8080ff

    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.

Simulateur.

Le simulateur vous permet de choisir la couleur d'arrière-plan et celle du premier plan, puis un des modes de fusion.

Couleur d'arrière-plan :
Couleur du premier plan :

 

mix-blend-mode :

 

Arrière-plan
Premier plan
Fusion