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

[Canonical HTML page](https://gradiently.design/fr/guide/yellow-gradient)

Le jaune est la couleur qui trahit le plus souvent un dégradé : un seul mauvais arrêt et le soleil devient citron vert, ou l’or devient kaki. Voici pourquoi, et des codes qui restent chauds de bout en bout.

## The short version

- Un dégradé jaune vire au vert quand il fond vers le cyan, le turquoise ou le bleu, car les couleurs entre le jaune et le bleu passent par le vert.
- Les jaunes foncés dérivent vers l’olive et le kaki : approfondissez le jaune avec de l’ambre, de l’orange ou du brun plutôt que du gris ou du noir.
- Le jaune reste le plus ensoleillé quand ses autres arrêts tirent vers le chaud : crème, pêche, orange, rose ou or.
- Le texte blanc ne marche presque jamais sur le jaune ; du presque noir ou du brun profond se lit bien mieux.
- Pour joindre le jaune et le bleu dans un seul fondu, placez du blanc, du rose ou du violet entre eux, pour que le point médian ne tombe jamais sur le 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.

### Vire au vert ou à l’olive

- Du jaune directement au bleu ciel ou au turquoise
- Du jaune assombri avec du gris ou du noir
- Un citron froid comme arrêt le plus vif
- Du jaune au vert sans arrêt chaud

### Reste ensoleillé

- Du jaune vers la crème, la pêche, l’orange ou le rose
- Du jaune approfondi avec de l’ambre et du brun
- Un jaune chaud comme `#facc15` comme arrêt le plus vif
- Du blanc ou du rose placé entre le jaune et le bleu

Le même problème de milieu gris touche toutes les couleurs opposées, et [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) 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.

- Sorbet citron: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Tournesol: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Du jaune à la mandarine: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Limonade rose: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Soleil de midi: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Canicule: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Six dégradés jaune vif. Chaque couleur partenaire est plus chaude que le jaune, ce qui les garde nets.

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.

- Papier crème: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Beurre: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Crème anglaise et pêche: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Lumière de fenêtre: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Des jaunes doux pour les longues lectures et les marques tendres. Ils s’accordent bien avec un texte charbon, brun et vert profond.

## 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](https://gradiently.design/fr/guide/gold-gradient-design) montre comment simuler l’éclat.

- Miel: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Moutarde: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Or brossé: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Or sur fond sombre: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Chaque arrêt profond se déplace vers l’ambre ou le brun. Le résultat se lit comme de l’or plutôt que de l’olive.

> **Surveillez la couleur de l’ombre** Si vous ombrez un objet jaune dans un design avec une superposition grise ou noire, il paraîtra olive. Ombrez plutôt le jaune avec de l’ambre ou du brun translucide.

## 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.

- À éviter : milieu citron vert: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Par la crème: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Par le rose: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Lumière jaune sur marine: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

Le premier fondu montre le problème. Les trois autres joignent le jaune et le bleu sans jamais passer par le vert.

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](https://gradiently.design/fr/guide/css-gradient-oklch).

```css
.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 long trajet autour du cercle des teintes évite le vert. Gardez le repli fait main pour les navigateurs sans interpolation d’espace colorimétrique.

## 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é](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les seuils.

| Fond | Texte blanc | Texte brun #422006 |
| --- | --- | --- |
| Citron `#fde047` | Échoue nettement | Environ 11:1 |
| Tournesol `#facc15` | Environ 1,5:1, échoue | Environ 9,5:1 |
| Or foncé `#ca8a04` | Environ 2,9:1, échoue | Passe |
| Ocre `#a16207` | Environ 4,9:1, passe | Faible |
| Bronze `#854d0e` | Environ 6,9:1, passe | Échoue |

Mesures sur couleur plate. Sur un dégradé, vérifiez la partie la plus claire derrière chaque ligne de texte.

Une publication de ferme avec un titre brun foncé sur un fond en dégradé jaune chaud et orange

Un texte sombre et chaud sur un jaune ensoleillé. Il se lit tout de suite et garde l’humeur joyeuse.

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](https://gradiently.design/fr/guide/yellow-color-meaning) explique ce qu’il signale, et [les dégradés orange](https://gradiently.design/fr/guide/orange-gradient) sont son voisin de palier naturel.

## FAQ

### Pourquoi mon dégradé jaune paraît-il vert ?

Soit il fond vers une couleur froide comme le bleu ou le turquoise, soit le jaune lui-même penche vers le citron. Utilisez des arrêts partenaires plus chauds comme l’orange, le rose ou la crème.

### Comment faire un dégradé jaune foncé qui ne soit pas olive ?

Approfondissez le jaune avec de l’ambre, de l’ocre et du brun plutôt que du gris ou du noir. Il devient alors or ou miel plutôt que kaki.

### Quelle couleur de texte sur un fond jaune ?

Du presque noir, du charbon ou du brun profond. Le texte blanc échoue au contraste sur presque tous les jaunes vifs.

### Comment fondre le jaune et le bleu dans un seul dégradé ?

Placez de la crème, du blanc ou du rose entre eux, ou interpolez en OKLCH avec `longer hue` pour que le fondu traverse des couleurs chaudes plutôt que du vert.

### Quel est un bon code CSS de dégradé jaune ?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` est un jaune chaud fiable qui ne dérive jamais vers le vert.