Effet halation : la lueur de la pellicule sur un site

Sur une photo argentique, les lumières vives débordent. Une lampe, une fenêtre, le reflet d’un verre s’entourent d’un halo chaud, rouge orangé sur la pellicule couleur : c’est la halation. Sur un site, le calque du même nom pose ce halo par-dessus la page, dans la couleur d’accent, pour que la lumière appartienne à la palette. L’image semble sortie d’une pellicule plutôt que d’un capteur.

Sans

Halation

D’où vient l’effet

Une pellicule est faite de couches sensibles posées sur un support transparent. Une lumière très forte traverse ces couches, se réfléchit dans le support ou sur la plaque presseuse de la caméra, et revient éclairer la couche sensible au rouge, autour de la source. Le fabricant CineStill décrit ainsi la lueur qu’on voit dans les hautes lumières surexposées.

Pendant près d’un siècle, Kodak a protégé ses films de cinéma couleur par une couche noire au dos du support, le rem-jet, qui arrêtait la halation, les étincelles d’électricité statique et les rayures. En 2025, le fabricant a annoncé son remplacement, sur ses négatifs VISION3, par une sous-couche anti-halo placée sous l’émulsion et éliminée au développement. Selon ses essais comparatifs, elle maîtrise la halation encore mieux que l’ancienne couche.

L’effet a pourtant trouvé ses amateurs. CineStill fabrique des films couleur sans couche anti-halo, et la lueur rouge de ses hautes lumières est devenue sa signature ; le fabricant note que beaucoup de photographes l’ont adoptée. Ce que l’industrie traitait comme un défaut, les sites le reprennent comme une matière.

Quand la poser

La halation va aux pages qui vivent de lumière du soir et de sources visibles :

• une salle de restaurant ou un bar, ses suspensions, ses bougies, ses verres ;
• un salon de coiffure ou d’esthétique, ses miroirs éclairés ;
• un studio de création ou d’image de synthèse, pour qui la lumière est le sujet ;
• un label, une salle de concert, avec ses projecteurs ;
• le lancement d’un produit, mis en scène comme une affiche de film.

Cinq mises en page de l’atelier la posent d’office. La mise en page Table, la mise en page Salon et la mise en page Marque produit la portent seule. La mise en page Studio 3D l’associe aux lignes de trame, et la mise en page Label à la poussière.

Quand s’en passer. Sur une vidéo froide, bleue ou grise, un halo chaud jure. Une page qui doit inspirer la rigueur, un cabinet comptable ou un bureau d’études, se passe de lumière qui bave. Et sur une palette très claire, le calque n’a plus de marge : il ne sait qu’éclaircir, et un fond blanc l’est déjà.

Le bon dosage

Dans la bibliothèque, le calque est posé à 35 % d’opacité. Il est fait de deux halos de la couleur d’accent du site : le premier, plus dense, un peu au-dessus et à droite du centre ; le second, plus faible, en bas à gauche. Tous deux s’éteignent bien avant les bords.

Ces deux halos gardent leur place, quelles que soient les lumières de votre film. Le calque marche le mieux quand la vidéo est éclairée à peu près depuis ces endroits, ou quand sa lumière est assez diffuse pour que la position compte peu. Sur un film éclairé par une seule lampe, posée ailleurs, regardez le résultat avant de le garder.

Comme les autres matières, la halation laisse le premier écran nu et se lève à mesure qu’on descend. Et la règle tient : deux calques au plus. La halation s’accorde avec une texture, la trame ou la poussière, qui travaille la surface pendant qu’elle travaille la lumière ; à trois calques, l’image se salit.

Ce qu’elle coûte

Peu. Deux dégradés, dessinés une fois par le navigateur, sans fichier à télécharger, posés en position fixe. La feuille de la bibliothèque range la halation parmi les calques légers : un seul, le givre, s’y paie vraiment.

Elle ne s’anime pas. La seule chose qui varie est son opacité pendant le premier défilement, et l’opacité fait partie des deux propriétés qu’un navigateur sait changer sans repeindre l’écran (web.dev). Le mouvement vient du film dessous, jamais de la texture dessus.

L’accessibilité

• Le contraste. Le calque éclaircit tout ce qu’il couvre, texte compris. Sur une page sombre, il relève un peu le fond derrière un texte clair, et réduit donc l’écart entre les deux. Vérifiez le contraste à l’endroit du halo le plus dense, au-dessus et à droite du centre : au moins 4,5 pour 1 pour un texte courant (WCAG 2.2, critère 1.4.3).
• Le mouvement réduit. Le grain et le givre disparaissent quand le visiteur demande moins d’animations (prefers-reduced-motion). La halation reste : elle est immobile.
• Aucun clignotement. Le halo ne pulse pas et ne suit pas la souris. Rien, dans ce calque, ne s’allume ni ne s’éteint.

Comment elle est faite

Deux dégradés radiaux, radial-gradient(), de la couleur d’accent mêlée à la transparence, et un mode de fusion, mix-blend-mode: screen. En mode écran, le navigateur inverse les deux couleurs, les multiplie et inverse le résultat (MDN) : le calque peut seulement éclaircir. C’est ainsi que la lumière s’ajoute à la lumière, et c’est pourquoi le halo se voit surtout sur le sombre.

.m.m--halation {
  mix-blend-mode: screen;
  opacity: calc(var(--halation, .35) * var(--m-voile, 1));
  background:
    radial-gradient(58% 44% at 68% 38%,
      color-mix(in srgb, var(--accent) 42%, transparent), transparent 66%),
    radial-gradient(70% 60% at 22% 72%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

Le halo prend la couleur d’accent du site, celle de ses boutons. Une halation rouge orangé, comme sur la pellicule, suppose donc un accent chaud ; avec un accent vert ou bleu, elle devient une lueur de néon. Pour une coulée chaude qui entre par un angle, la bibliothèque a une autre matière, la fuite de lumière.

Dans l’atelier

La halation fait partie des dix matières de la bibliothèque. On la choisit à l’étape « La matière », après le fond.