Dégradés vifs : des codes saturés qui ne vibrent pas

Un dégradé vif est lumineux et saturé sans scintiller quand deux règles sont respectées : chaque couleur est proche de sa voisine sur le cercle chromatique, et chaque étape change nettement de clarté. Enfreignez la première et le milieu devient boueux ; enfreignez la seconde, en plaçant côte à côte des teintes opposées de même luminosité, et le bord semble scintiller. Les douze codes ci-dessous suivent les deux règles : ils sont forts comme une affiche, pas comme une migraine.

Douze codes de dégradés vifs

Pourquoi certains dégradés vifs vibrent

Placez un rouge saturé directement contre un bleu saturé de luminosité semblable et la frontière semble clignoter, comme si les deux couleurs n’arrivaient pas à décider laquelle est devant. Les designers appellent cela la vibration chromatique. Elle est la plus forte sur les bords nets, les lignes fines et le texte coloré, et c’est pourquoi un texte rouge sur fond bleu est si fatigant à lire. Les couleurs elles-mêmes vont très bien ; c’est la combinaison de teintes opposées et de clartés égales, qui se touchent, qui en est la cause.

Il y a deux solutions. Soit séparer les couleurs par une étape plus sombre ou plus claire, comme à droite, soit choisir des voisines plutôt que des opposées. Les couleurs complémentaires explique quand les opposées valent la peine.

Règles pour créer votre propre dégradé vif

La boue est l’autre façon dont les dégradés vifs échouent. Mélangez deux opposées saturées en sRGB simple et la couleur du milieu tire vers le gris, ce que traitent les dégradés boueux et, plus techniquement, l’interpolation des dégradés. La saturation elle-même est un curseur, pas un interrupteur ; la saturation en design montre comment la régler.

Les dégradés vifs en CSS

Les navigateurs modernes savent mélanger dans un espace colorimétrique perceptuel si l’on ajoute in oklch au dégradé. Le milieu d’un large mélange reste alors aussi vif que ses extrémités. Donnez d’abord une version hexadécimale aux anciens navigateurs.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Où les dégradés vifs fonctionnent le mieux

La couleur vive attire l’attention, alors dépensez-la là où l’attention est tout l’enjeu : un fil qui défile, une miniature parmi vingt autres, une affiche de l’autre côté de la rue. Elle convient moins là où l’on doit lire longtemps, comme les documents, les tableaux de bord et les longs articles, où un champ saturé fatigue l’œil en quelques paragraphes. Là, réservez le dégradé vif à un en-tête ou à un seul bouton, et laissez une surface calme porter le reste.

L’impression est le seul endroit où s’attendre à un choc. Les couleurs d’écran les plus lumineuses, en particulier les bleus électriques, les roses vifs et les verts acides, sortent de ce que les encres CMJN peuvent reproduire et reviennent nettement plus ternes sur papier. RVB ou CMJN explique pourquoi ; choisissez vous-même des versions un peu plus profondes et commandez une épreuve avant un tirage.

Des mots sur un dégradé vif

Les fonds saturés varient fortement en luminosité d’une extrémité à l’autre, donc une seule couleur de texte lisible côté sombre peut disparaître côté clair. N’utilisez que du blanc ou du quasi noir, placez le titre là où le dégradé est le plus profond ou le plus pâle, et vérifiez le contraste au pire endroit, pas en moyenne. Contraste des couleurs et accessibilité donne les valeurs à viser.

C’est là qu’un Mark Gradiently aide avec la couleur vive : il sait où se trouvent les mots, approfondit ou éclaircit la couleur près des lettres, et l’encre automatique choisit un texte clair ou sombre pour chaque ligne à partir de sa propre palette. Un style saturé reste lisible à toutes les tailles, sans cadre ni ombre derrière le titre. Pour les styles néon en particulier, voyez les dégradés néon ; pour l’autre bout du curseur, les dégradés subtils.