L’essentiel en bref
- 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.
Sur cette page
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 |
Les écarts de la première ligne correspondent aux couleurs analogues. Ceux de la dernière ligne correspondent aux couleurs complémentaires, 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.
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 pour la théorie.
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.
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.
/* 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); }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é détaille les vérifications.
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é), 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 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.
Les questions qu’on nous pose
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.
É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
