Dégradé jaune : codes vifs qui ne virent pas au vert

Un dégradé jaune paraît vif et joyeux quand chaque arrêt tire vers le chaud : crème, beurre, citron, or, orange. Il dérape de deux façons prévisibles. Fondez-le vers le bleu ou le turquoise et le milieu vire au vert ; assombrissez-le avec du gris et il vire à l’olive. Gardez la teinte du côté chaud du jaune, approfondissez-le avec de l’ambre plutôt que du noir, et il reste du soleil d’un bout à l’autre. Les codes ci-dessous reposent sur cette règle.

Pourquoi les dégradés jaunes virent au vert ou au boueux

Le jaune est tout près du vert sur le cercle chromatique, bien plus près que la plupart ne l’imaginent. Cela le rend fragile dans trois situations.

• Fondre vers des couleurs froides. Entre le jaune et le cyan, le turquoise ou le bleu, le navigateur doit passer par le vert. Un fondu du jaune soleil au bleu ciel obtient une bande citron vert ou sauge au milieu.
• Assombrir avec du noir ou du gris. L’œil lit un jaune sombre et peu saturé comme de l’olive ou du kaki plutôt que comme du « jaune foncé ». Il n’existe pas de jaune profond qui ressemble encore à du jaune.
• Partir d’un citron qui penche déjà vers le vert. Les citrons acides comme #e4f04a paraissent frais seuls mais tirent chaque arrêt voisin vers le citron vert.

Le même problème de milieu gris touche toutes les couleurs opposées, et les dégradés boueux le traite en général. Le jaune ne fait que le montrer en premier, car le vert est si proche.

Codes de dégradé jaune vif

Ce sont les bruyants : l’été, les bannières de soldes, les marques pour enfants, les festivals, la signalétique d’avertissement bien faite. Chacun associe le jaune à un partenaire plus chaud pour du mouvement sans dériver vers le vert.

Le jaune vif fatigue en grande quantité : employez-les sur des publications et des bannières plutôt que sur tout un site. Sur une story de 1080×1920, un fondu jaune qui vire à l’orange en bas donne à l’œil un endroit où se poser et garde la partie la plus vive près de la zone du titre, en haut.

Dégradés jaune clair : beurre et crème

Les jaunes pâles se comportent comme du papier chaud. Ils font d’excellents arrière-plans pour menus, invitations, newsletters et tout ce qui se lit beaucoup, car le texte sombre s’y pose confortablement. Gardez au moins un arrêt proche du blanc pour que le jaune se lise comme de la lumière, pas comme une teinte sur tout.

Dégradés jaune doré et jaune foncé sans olive

Pour que le jaune paraisse riche, ne l’assombrissez pas. Décalez-le. Déplacez les arrêts plus profonds vers l’ambre, l’ocre et le brun, et le jaune devient or, miel et moutarde plutôt que kaki. Pour les finitions métalliques en particulier, les dégradés or montre comment simuler l’éclat.

Dégradés jaune et bleu sans milieu vert

Jaune et bleu forment une association classique, mais un fondu direct entre eux produit une bande verte. Vous avez trois bonnes options : placer un arrêt clair entre eux, faire passer le fondu par le rose et le violet, ou garder les deux couleurs séparées en zones plutôt qu’en fondu.

En CSS moderne, vous pouvez aussi demander au navigateur de prendre le chemin le plus long autour du cercle chromatique. Interpoler en OKLCH avec longer hue envoie le jaune vers le bleu par l’orange, le rose et le violet au lieu du vert. La prise en charge et la syntaxe sont présentées dans les dégradés CSS en OKLCH.

.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}

Le texte sur un dégradé jaune

Le jaune est la couleur saturée la plus claire qui soit : le texte blanc y disparaît. Le blanc sur #facc15 mesure environ 1,5 pour 1, alors qu’un brun profond comme #422006 dépasse 9 pour 1 sur le même jaune. Employez un texte sombre presque partout, et gardez le blanc pour les ors les plus profonds. Contraste des couleurs et accessibilité donne les seuils.

Dans Gradiently, l’encre automatique tranche à votre place, en choisissant un texte clair ou foncé pour chaque ligne à partir de la palette du Mark, si bien qu’un design jaune n’exige pas de vérification manuelle du contraste à chaque redimensionnement. Si le jaune fait partie de votre identité, la signification de la couleur jaune explique ce qu’il signale, et les dégradés orange sont son voisin de palier naturel.