# Dégradés de deux couleurs : 30 duos qui marchent toujours [Canonical HTML page](https://gradiently.design/fr/guide/two-color-gradients) Deux couleurs, une direction, rien qui puisse mal tourner. Ou presque. Voici les deux règles qui décident si un duo fonctionne, et trente duos qui passent les deux, prêts à copier. ## The short version - Un dégradé de deux couleurs fond une couleur dans une autre : c’est le dégradé le plus simple à concevoir, à recolorer et à garder cohérent. - La réussite d’un duo dépend surtout de l’écart de teinte : des teintes voisines se fondent toujours proprement, des teintes opposées virent au gris au milieu. - Une différence de luminosité entre les deux couleurs donne au dégradé une direction et de la profondeur. - Deux couleurs d’une même famille de teinte, l’une claire et l’autre sombre, font le dégradé le plus polyvalent, car le texte fonctionne à l’une des extrémités. - Comme les dégradés de deux couleurs sont très courants, c’est un petit changement, un angle inhabituel, un point milieu décalé ou une couche de grain, qui en rend un reconnaissable. Un **dégradé de deux couleurs** est un fondu d’une couleur vers une autre, et c’est le dégradé le plus sûr qui soit : deux couleurs sont faciles à choisir, à recolorer et à garder cohérentes. La réussite d’un duo tient à deux choses : l’écart entre les teintes sur le cercle chromatique, et la différence de luminosité. Réglez ces deux points et presque n’importe quelles deux couleurs font un bon dégradé. Voici les règles, puis trente duos qui les suivent. ## Règle 1 : surveiller l’écart de teinte L’écart de teinte est la distance entre deux couleurs sur le cercle chromatique, mesurée en degrés. Il prédit ce qui se passe au milieu du fondu, là où un dégradé de deux couleurs réussit ou échoue. | Écart de teinte | Ce qui se passe au milieu | Verdict | | --- | --- | --- | | 0 à 60 degrés | Une couleur intermédiaire nette, comme le violet entre le bleu et le rose | Toujours sûr | | 60 à 120 degrés | En général une nouvelle couleur claire, parfois un peu terne | Sûr ; vérifiez le milieu | | 120 à 150 degrés | Souvent un milieu plus doux et plus gris | À tester avec soin | | 150 à 180 degrés | Du gris ou du brun au milieu avec le fondu par défaut | Demande une couleur relais ou OKLCH | Plus l’écart est grand, plus le point milieu risque de perdre sa couleur. L’explication complète est dans [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients). Les écarts de la première ligne correspondent aux [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors). Ceux de la dernière ligne correspondent aux [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors), frappantes côte à côte mais qui ont besoin d’aide quand on les fond. ## Règle 2 : créer une différence de luminosité Deux couleurs de même luminosité donnent un dégradé plat, qui semble n’aller nulle part. Une vraie différence de luminosité donne une direction au fondu, comme une lumière venant d’un côté. Elle apporte aussi un avantage pratique : le texte peut se placer en blanc à l’extrémité sombre, ou en encre foncée à l’extrémité claire. ### Paraît plat - Deux couleurs de ton moyen et de même luminosité - Deux couleurs pleinement saturées sans extrémité sombre - Aucun endroit évident pour le texte ### Paraît éclairé - Une couleur plus claire et une plus sombre - Une couleur saturée associée à une voisine plus profonde - Une extrémité claire et une sombre bien nettes pour le texte ## Duos de teintes proches Ces duos se situent à environ 60 degrés l’un de l’autre au maximum. Impossible de les rendre boueux, et ils vont sur presque tout, des boutons aux arrière-plans plein écran. Myrtille et Marée, par exemple, sont deux bleus qui glissent vers le violet et se lisent comme une seule couleur qui accroche la lumière. - Myrtille: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamant: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Lagon: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Souci: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orchidée: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Herbe coupée: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Bois de rose: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Marée: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Clémentine: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Mousse et sarcelle: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Duos de teintes proches : voisines sur le cercle, avec donc toujours un milieu propre. ## Duos du clair au sombre Ces duos gardent une seule famille de teinte et vont du pâle au profond. Ce sont les dégradés de deux couleurs les plus polyvalents : assez calmes pour toute une page, avec une extrémité sombre prête pour un texte blanc. Ils font aussi d’excellents dégradés de marque, car ils prolongent une couleur de marque au lieu d’en ajouter une nouvelle. Voir [les harmonies monochromes](https://gradiently.design/fr/guide/monochromatic-color-scheme) pour la théorie. - Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Prune: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Forêt: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Rouille: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Anthracite: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Bordeaux: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Sarcelle profond: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Indigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Cacao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Ambre: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Duos du clair au sombre : une famille de teinte, un grand écart de luminosité. Encre foncée en haut, texte blanc en bas. ## Duos contrastés qui restent propres Ces duos sont plus éloignés, entre environ 90 et 150 degrés, mais chacun garde un point milieu lumineux avec le fondu par défaut. Pêche et violet passent par le mauve, cyan et magenta par la pervenche, orange et magenta par le rose vif. Plus énergiques que les duos proches, ils conviennent aux lancements, à la musique et à tout ce qui doit se démarquer. - Corail et indigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Pêche et violet: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Citron vert et bleu: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Rose et ciel: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Jaune et rose: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Cyan et magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Rouge et violet: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Menthe et violet: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Orange et magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Vert et or: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Duos contrastés : plus d’écart de teinte, un milieu toujours lumineux. Vérifiez le contraste du texte aux deux extrémités. ## Déplacer le point milieu Par défaut, un dégradé de deux couleurs est moitié-moitié. Le CSS permet de déplacer le point où les deux couleurs sont mélangées à parts égales grâce à un indice de couleur : un simple pourcentage entre les arrêts. Poussez-le vers une extrémité et l’autre couleur occupe davantage de surface, sans ajouter de troisième couleur. ```css /* Even blend: the mix point sits at 50% */ .even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } /* Colour hint at 25%: violet arrives early and fills most of the box */ .violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); } /* Colour hint at 75%: blue holds on for most of the box */ .blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); } ``` Un indice de couleur déplace le point milieu sans ajouter de couleur. C’est l’un des moyens les plus rapides de rendre un duo courant moins banal. ## Où placer le texte sur un dégradé de deux couleurs Un dégradé de deux couleurs a une mise en page intégrée : une extrémité plus claire, l’autre plus sombre. Placez les mots à l’extrémité qui contraste le plus avec la couleur de votre texte, et laissez l’autre porter la couleur. Pour un texte blanc, c’est l’extrémité sombre ; pour une encre foncée, la claire. Ne centrez jamais un petit texte sur le point milieu d’un duo clair-sombre, car le contraste change le long de la ligne. [Du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) détaille les vérifications. Une publication verticale avec un titre court placé à l’extrémité la plus calme d’un arrière-plan en dégradé Les mots à l’extrémité calme du fondu, la couleur à l’autre : la mise en page la plus simple qu’offre un dégradé. ## Faire d’un dégradé de deux couleurs le vôtre Les dégradés de deux couleurs sont populaires justement parce qu’ils sont sûrs : les duos populaires sont donc partout. Pour en rendre un reconnaissable, changez quelque chose que l’on remarque sans y penser : un angle plus marqué ou inhabituel (voir [l’angle d’un dégradé](https://gradiently.design/fr/guide/gradient-angle)), un point milieu décalé, un grain fin, ou une troisième couleur utilisée sur un seul bord. Quand vous voudrez aller au-delà de deux, les [60 associations de couleurs pour dégradés](https://gradiently.design/fr/guide/gradient-color-combinations) sont classées par ambiance. Si vous savez déjà quelles deux couleurs vous voulez, tapez-les dans la recherche du Marché, par exemple « blue and violet », et créez avec les Marks construits autour d’elles. ## FAQ ### Quelles deux couleurs font le meilleur dégradé ? Des couleurs à environ 60 degrés l’une de l’autre au maximum sur le cercle chromatique, avec une vraie différence de luminosité, font les dégradés de deux couleurs les plus fiables. ### Pourquoi mon dégradé de deux couleurs est-il gris au milieu ? Les couleurs sont presque opposées sur le cercle chromatique. Ajoutez une couleur relais lumineuse au milieu ou faites le fondu en OKLCH. ### Un dégradé de deux couleurs vaut-il mieux que trois couleurs ? Deux couleurs, c’est plus simple et plus sûr. Trois donnent plus de profondeur et permettent de maîtriser le milieu, mais sont plus faciles à rater. ### Comment changer l’endroit où deux couleurs se rencontrent dans un dégradé CSS ? Ajoutez un indice de couleur, un simple pourcentage entre les deux arrêts, par exemple `linear-gradient(#3b82f6, 25%, #8b5cf6)`. ### Où placer le texte sur un dégradé de deux couleurs ? À l’extrémité qui contraste le plus avec la couleur de votre texte : du blanc sur l’extrémité sombre, une encre foncée sur l’extrémité claire.