L’essentiel en bref
- 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.
Sur cette page
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é 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.
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.
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.
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.
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.
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.
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.
.card {
background-color: #3b1d6e; /* fallback */
background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
color: #ffffff;
}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.
- 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.
- 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.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
