# 60 combinaisons de couleurs en dégradé qui marchent, avec codes

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

Soixante dégradés, classés selon l’impression voulue plutôt que par teinte. Chacun est un code CSS vivant à copier, et chaque groupe explique la règle qui fait fonctionner ses fondus.

## The short version

- Les meilleures combinaisons de couleurs en dégradé utilisent soit des teintes voisines, qui se fondent proprement, soit relient des teintes éloignées par une couleur médiane choisie.
- Les dégradés calmes gardent luminosité et teinte proches ; les dégradés vifs poussent la saturation et l’écart de teinte.
- Les dégradés sombres marchent le mieux comme un fond presque noir avec une couleur éclairée, et les dégradés pastel comme des voisines pâles avec une encre sombre pour le texte.
- Choisir un dégradé d’abord par l’ambiance, puis par la teinte, donne des résultats plus cohérents que de choisir les couleurs qu’on aime une à une.
- Toute combinaison ici peut être rendue plus distinctive avec une troisième couleur, un autre angle ou une couche de grain.

Les meilleures **combinaisons de couleurs en dégradé** suivent l’une de deux règles : elles utilisent des teintes voisines sur le cercle chromatique, pour que le fondu reste net, ou elles relient des teintes éloignées par une couleur médiane choisie, pour qu’il ne vire jamais au gris. Voici 60 combinaisons qui suivent ces règles, groupées par ambiance : calme, vif, chaud, froid, sombre et pastel. Copiez n’importe quel échantillon en CSS, puis lisez la note sous chaque groupe pour voir pourquoi ils marchent, afin de faire les vôtres.

Tout ici est du CSS simple avec des couleurs hex : cela marche donc dans n’importe quel navigateur, et les mêmes codes peuvent être tapés dans n’importe quel outil de design. Si un terme est nouveau, [ce qu’est un dégradé](https://gradiently.design/fr/guide/what-is-a-gradient) explique les repères et les angles.

## Combinaisons de dégradés calmes

Les dégradés calmes gardent leurs couleurs proches en teinte comme en luminosité. Rien ne saute, l’œil se repose donc. Ils font de bons fonds pour la lecture, les marques de bien-être, les portfolios et tout ce qui doit paraître silencieux. Sauge et pierre, par exemple, ne parcourt qu’une petite distance sur le cercle et perd un peu de luminosité en chemin, ce qui se lit comme l’ombre sur un mur plutôt que comme un effet de couleur.

- Verre de mer: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Brume du matin: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Sauge et pierre: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Crépuscule lavande: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Eau calme: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Banc de sable: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Bleu ardoise: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Lait d’avoine: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Pierre de lune: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calme : une famille de teintes, de petits écarts de luminosité. Ils portent facilement un texte sombre.

## Combinaisons de dégradés vifs

Les dégradés vifs utilisent des couleurs saturées et plus de distance sur le cercle. Ils captent l’attention dans un fil chargé, sur une bannière de soldes ou une page de lancement. L’astuce est de choisir des paires dont le fondu direct reste éclatant. Magenta vers ambre passe par le corail ; cobalt vers corail passe par le violet. Aucun ne s’approche du gris, ce qui explique qu’ils paraissent vifs d’un bout à l’autre.

- Violet électrique: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Agrume ardent: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Punch tropical: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Éclat outremer: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta vers ambre: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Jungle: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalt et corail: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Soda raisin: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Citron vert et sarcelle: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Vifs : forte saturation, paires choisies pour que le point médian reste éclatant. Utilisez du texte blanc sur l’extrémité la plus sombre.

## Combinaisons de dégradés chauds

Les dégradés chauds vivent entre le rouge et le jaune et paraissent ensoleillés, appétissants et humains. Ils conviennent à la cuisine, à l’hôtellerie, au lifestyle et à tout ce qui est personnel. La plupart ajoutent une extrémité plus sombre et plus rouge pour donner du poids au fondu : Heure dorée va du miel pâle à l’ambre brûlé comme la lumière tardive descend un mur. Pour la psychologie de la température, voyez [les couleurs chaudes et froides](https://gradiently.design/fr/guide/warm-and-cool-colors).

- Heure dorée: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terre cuite: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Sorbet pêche: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Braise: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Rose du désert: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Miel: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Cannelle: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Bande de coucher de soleil: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Abricot et prune: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Brique et or: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Chauds : voisins rouge, orange et jaune, en général avec une extrémité plus sombre pour la profondeur. Pour en voir plus, voyez [les dégradés coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient).

## Combinaisons de dégradés froids

Les dégradés froids se tiennent entre le vert et le violet et paraissent nets, calmes et précis. Ils sont la maison naturelle de la technologie, de la santé, de la finance et de l’eau. Le bleu est l’ancre de la plupart, ce qui explique qu’ils inspirent confiance, et pourquoi un dégradé froid a besoin d’un détail distinctif, comme une extrémité violette ou un décalage vers la sarcelle, pour éviter de ressembler à toutes les banques. D’autres bleus sont rassemblés dans [les dégradés bleus](https://gradiently.design/fr/guide/blue-gradient).

- Glacier: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Lagon profond: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nordique: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Nuit indigo: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Menthe vers ciel: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Pervenche: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Sarcelle arctique: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Heure bleue: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Violet glacé: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Profondeur océane: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Froids : voisins vert, sarcelle, bleu et violet. Un léger décalage de teinte les fait paraître moins corporate.

## Combinaisons de dégradés sombres

Les dégradés sombres sont des fonds presque noirs d’où monte une couleur éclairée. Ils paraissent premium, nocturnes et cinématographiques, et font ressortir nettement le texte blanc. Gardez l’extrémité sombre légèrement colorée plutôt que noir pur, pour que le fondu ait quelque chose à parcourir. Les rampes sombres forment facilement des bandes : ajoutez du grain avant de publier ; voyez [les fonds en dégradé sombres](https://gradiently.design/fr/guide/dark-gradient-backgrounds).

- Violet de minuit: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Fonds marins: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Sous-bois: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Sang-de-bœuf: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Graphite: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Encre et braise: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Bleu pétrole: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Sarcelle de nuit: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Cerise noire: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Sombres : un presque-noir teinté, un milieu profond et une couleur éclairée à l’autre extrémité.

## Combinaisons de dégradés pastel

Les pastels sont des couleurs pâles, très lumineuses, avec un peu de saturation. Ils paraissent frais, doux et conviviaux, et conviennent à la beauté, à la petite enfance, à la papeterie et aux campagnes de printemps. Comme ils sont tous très clairs, même des teintes pastel éloignées peuvent se fondre en un gris blanchâtre : les deux dernières ici passent donc par un lilas pâle. Composez le texte sur les pastels en encre sombre plutôt qu’en blanc. Il y a plus dans [les dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients).

- Barbe à papa: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Pêche et lilas: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistache: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Bleu bébé: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Citron et rose pâle: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Menthe et crème: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Violet poudré: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Écume et rose: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Ciel d’aube: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel : voisines pâles, ou pastels éloignés reliés par du lilas pour que le milieu reste teinté.

## Comment utiliser ces codes de dégradé

Chaque code est une valeur CSS `background` complète. Collez-la sur n’importe quel élément, ou reportez les couleurs hex et les positions des repères dans un outil de design. Sur le web, définissez d’abord une couleur de repli unie, tirée du repère le plus sombre ou le plus important.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Violet de minuit sur une carte, avec une couleur de repli et du texte blanc.

## Comment faire votre propre combinaison

1. **Choisissez d’abord l’ambiance** Décidez calme ou vif, chaud ou froid, sombre ou clair avant toute couleur. Cela réduit les choix à l’un des groupes ci-dessus.
2. **Choisissez une couleur d’ancrage** En général la couleur de votre marque ou celle de ce que vous vendez. Voyez [comment choisir les couleurs de marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors).
3. **Ajoutez une voisine** Déplacez-vous de 30 à 60 degrés sur le cercle chromatique pour une deuxième couleur nette. Changez aussi un peu la luminosité, pour la profondeur.
4. **Reliez tout ce qui est éloigné** Si vous voulez une teinte lointaine, placez une couleur médiane vive entre elles pour que le fondu ne vire pas au gris. Voyez [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).
5. **Faites-la vôtre** Changez l’angle, décalez un repère de 50 %, ajoutez une troisième couleur ou une couche de grain. De petits changements sont ce qui empêche une combinaison de ressembler à un préréglage.

Un code populaire est un bon début, mais des milliers d’autres designs partent de là aussi. Si vous voulez une identité en dégradé que personne d’autre ne détient, vous pouvez assortir une image que vous aimez à sa palette et aux Marks les plus proches, ou en faire de nouveaux dans le même esprit.

## FAQ

### Quelles couleurs vont bien ensemble dans un dégradé ?

Des couleurs voisines sur le cercle chromatique, comme bleu et violet ou orange et rose, se fondent toujours proprement. Les couleurs éloignées fonctionnent quand une couleur médiane vive les relie.

### Quelle est la combinaison de dégradé la plus populaire ?

Violet vers rose et bleu vers cyan comptent parmi les plus utilisées. Cette popularité est aussi ce qui fait qu’elles paraissent rarement distinctives.

### Combien de couleurs pour un dégradé ?

Deux est le plus simple, trois donne de la profondeur et le contrôle du point médian, et au-delà de cinq il est difficile de rester net.

### Quelle couleur de texte convient sur un dégradé ?

Du blanc ou presque blanc sur les dégradés sombres et vifs, et une encre sombre sur les pastel et les calmes. Vérifiez le contraste au point le plus clair derrière le texte.

### Puis-je utiliser ces codes de dégradé dans Figma ou Canva ?

Oui. Copiez les couleurs hex et la position de leurs repères dans le remplissage en dégradé de l’outil et alignez l’angle.