L’essentiel en bref
- La plupart des erreurs de design en dégradé viennent d’une poignée de causes : des couleurs qui passent par le gris, trop de repères, du banding visible, un texte peu contrasté et des préréglages laissés tels quels.
- Un dégradé entre deux teintes opposées vire souvent au gris au milieu en sRGB, ce que l’on corrige avec un repère central ou une interpolation OKLCH.
- Le banding se voit comme des rayures dans les dégradés lents, sombres ou subtils, et une légère couche de grain ou de tramage le masque en général.
- Le texte sur un dégradé demande de vérifier le contraste au pire point, pas au meilleur, car le fond change sous chaque lettre.
- Un dégradé paraît coûteux quand il a une structure claire, trois à cinq couleurs apparentées, une texture constante et une raison d’exister.
Sur cette page
Les erreurs de design en dégradé les plus courantes sont les milieux gris et boueux, trop de couleurs, le banding visible, le texte qui disparaît, les repères durs, la surcharge arc-en-ciel, un grain qui ne va pas, les préréglages laissés tels quels et un style identique à celui de tout le monde. Chacune a une cause précise et un remède précis. Aucune ne demande un nouvel outil, seulement un regard plus attentif sur ce que fait le fondu entre ses repères.
Ce guide reprend les neuf dans l’ordre où on les rencontre en général, des calculs de couleur jusqu’à l’identité. Si vous voulez d’abord les bases, lisez ce qu’est un dégradé.
Erreur 1 : un milieu gris et boueux
Fondez deux couleurs de côtés opposés du cercle chromatique, comme bleu et orange, et le point médian en sRGB est un gris-brun terne. Le navigateur fait la moyenne des canaux rouge, vert et bleu, et la moyenne de deux complémentaires est proche du neutre. Le résultat ressemble à une bavure entre deux belles couleurs.
Corrigez-le en faisant passer le fondu par une couleur située entre les deux sur le cercle, ou en interpolant dans un espace perceptuel. Les dégradés boueux couvrent les deux méthodes, et OKLCH en CSS explique la syntaxe.
Erreur 2 : trop de couleurs
Chaque couleur ajoutée est une transition de plus que l’œil doit lire. Au-delà de quatre ou cinq repères, un dégradé cesse de se lire comme de la lumière qui tombe sur une surface et commence à se lire comme un tableau de bandes. Il devient aussi impossible à reproduire deux fois de la même façon.
Choisissez une famille de teintes, ajoutez un parent plus clair et un plus sombre, puis autorisez au plus un accent. L’approche des couleurs analogues est le point de départ le plus sûr.
Erreur 3 : des rayures de banding
Le banding est l’escalier de paliers visibles que l’on voit dans un dégradé lent, surtout sombre. Un canal 8 bits a 256 niveaux, et quand un fondu parcourt une courte distance de couleur sur une large zone, chaque niveau devient une bande de plusieurs pixels de large. Une forte compression JPEG l’aggrave.
.hero {
position: relative;
background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}Le grain marche parce qu’il disperse les pixels sur des niveaux voisins : le bord entre deux bandes disparaît. Exportez en PNG ou en JPEG de haute qualité. Le banding des dégradés détaille les réglages d’export.
Erreur 4 : un texte qui disparaît sur le dégradé
Un dégradé change sous chaque lettre. Un texte blanc peut se lire magnifiquement sur l’extrémité sombre d’un fondu et disparaître sur l’extrémité claire de la même ligne. Les designers vérifient le titre là où il est le plus beau, et les lecteurs le rencontrent là où il est le pire.
Le fond traverse les mots, si bien que certaines lettres reposent sur une couleur vive.
Le même design avec la partie calme du champ déplacée derrière le texte.
Vérifiez le contraste au point le plus vif derrière un texte clair, ou au point le plus sombre derrière un texte foncé. Les WCAG demandent 4,5:1 pour le texte courant et 3:1 pour le grand texte ; le contraste des couleurs explique les chiffres et le texte sur un dégradé traite du placement.
Erreur 5 : des repères durs et accidentels
Quand deux repères sont à quelques pour cent l’un de l’autre, le fondu bascule d’une couleur à l’autre et trace une ligne que personne n’a demandée. Les repères durs sont utiles exprès, pour des rayures et des graphiques, mais une jonction accidentelle se lit comme une erreur.
Erreur 6 : la surcharge arc-en-ciel
Un spectre complet est la chose la plus bruyante qu’un dégradé puisse faire, et il dit rarement quelque chose de la marque qui l’utilise. Il porte aussi les associations de chaque teinte à la fois. Si vous voulez un arc-en-ciel, utilisez-en un court arc et maîtrisez la luminosité. Les dégradés arc-en-ciel montrent des versions de bon goût.
Erreur 7 : un grain qui ne va pas
À éviter
- Un grain gros sur le post, fin sur la story, aucun sur les diapos
- Du grain appliqué sur le texte et les logos
- Un grain si lourd qu’il se lit comme un objectif sale
- Agrandir une texture de grain jusqu’à ce que chaque grain devienne une tache
À faire
- Une seule taille et force de grain pour tous les formats
- Du grain sur le seul calque de fond
- Juste assez pour briser le banding et donner du grain
- Un grain généré à la taille d’export, pas étiré
La texture fait partie d’un style : un grain incohérent donne donc à une série de designs l’air de venir de trois endroits. Les dégradés granuleux traitent de la quantité à utiliser.
Erreur 8 : livrer le préréglage tel quel
La plupart des outils offrent les mêmes fondus à deux couleurs à 135 degrés. Ils paraissent corrects, ce qui explique qu’ils soient partout. Un préréglage est un point de départ : décalez une couleur, ajoutez un troisième repère, changez la direction pour convenir à la mise en page et ajoutez une matière. Utiliser un générateur de dégradés passe ces retouches en revue.
Erreur 9 : ressembler à tout le monde
La dernière erreur est la plus coûteuse. Un dégradé bien fait mais identique en esprit à celui de tous les concurrents ne travaille pas pour la reconnaissance. Le remède est la constance plus quelque chose de difficile à copier, comme une matière, une façon de bouger ou de faire de la place aux mots. L’identité de marque en dégradé explique comment en posséder un.
| Erreur | Remède rapide |
|---|---|
| Milieu gris | Repère central ou interpolation OKLCH |
| Trop de couleurs | Une famille de teintes plus un accent |
| Banding | Grain fin, export PNG ou de haute qualité |
| Texte illisible | Vérifier le contraste au pire point |
| Repères durs | Espacer les repères, sauf si le bord est voulu |
| Surcharge arc-en-ciel | Utiliser un court arc du spectre |
| Grain incohérent | Une recette de grain pour tous les formats |
| Préréglage tel quel | Changer couleur, repères, direction et texture |
| Pareil que tout le monde | Ajouter une matière et la garder constante |
Les questions qu’on nous pose
Pourquoi mon dégradé paraît-il gris au milieu ?
Des couleurs de côtés opposés du cercle donnent en moyenne un quasi-neutre en sRGB. Ajoutez un repère central dans une teinte située entre elles, ou interpolez en OKLCH.
Comment empêcher un dégradé de former des bandes ?
Ajoutez une fine couche de bruit ou de grain à faible opacité, évitez la forte compression JPEG et donnez aux dégradés sombres une plage de luminosité plus large à parcourir.
Combien de couleurs pour un dégradé ?
En général deux à quatre couleurs apparentées, avec au plus un accent. Au-delà de cinq repères, la plupart des dégradés commencent à paraître chargés.
Comment rendre un texte lisible sur un dégradé ?
Placez le texte sur la partie la plus calme du champ et vérifiez le contraste là où le fond est le plus proche de votre texte en luminosité. Visez 4,5:1 pour le texte courant et 3:1 pour le grand texte.
Les préréglages de dégradé sont-ils mauvais ?
Non, mais beaucoup de gens les partagent. Prenez un préréglage comme point de départ et changez ses couleurs, ses repères, sa direction et sa texture avant de l’utiliser.
É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
