L’essentiel en bref
- Un dégradé gris paraît réfléchi quand ses gris portent une légère teinte, froide vers le bleu ou chaude vers le brun.
- Mêler gris chauds et gris froids dans un dégradé le fait paraître sale : choisissez une température et gardez-la.
- Les gris métalliques viennent d’une bande nette et brillante entre des arrêts plus sombres, qui imite la lumière accrochant une surface.
- Les dégradés gris forment des bandes plus visibles que les colorés, et une fine couche de grain est le remède habituel.
- Un seul accent saturé sur un dégradé gris donne à tout le design un air délibéré.
Sur cette page
Un dégradé gris cesse d’être ennuyeux dès que ses gris sont teintés. Les gris purement neutres, à parts égales de rouge, de vert et de bleu, paraissent plats et numériques. Poussez-les légèrement vers le froid, le bleu, et vous obtenez brume, ardoise et acier ; poussez-les vers le chaud, le brun, et vous obtenez pierre, béton et étain. Ajoutez une lumière qui vient de quelque part et un accent de couleur, et le gris devient calme, moderne et discrètement assuré. Les codes de chacun suivent.
Gris chaud ou gris froid : choisissez
Les gris froids paraissent techniques, nets et précis. Les gris chauds paraissent architecturaux, naturels et doux. Les deux marchent très bien seuls. Ensemble dans un dégradé, ils se battent et le résultat ressemble à une bavure. Regardez les pastilles ci-dessous par paires : la rangée du haut penche vers le bleu, celle du bas vers le brun, et la différence est petite mais évidente une fois qu’on l’a vue.
Codes de dégradé gris froid et chaud
La brume et l’ardoise sont la paire froide : la brume pour les mises en page claires et aérées, l’ardoise pour les sérieuses et sombres. La tempête ajoute un nuage éclairé, qui donne à un gris foncé une vraie profondeur. La pierre et le béton sont la paire chaude, plus proches des matériaux de construction, et le graphite est le presque noir que vous pouvez employer à la place du noir simple.
Si vous allez encore plus foncé, les codes de dégradé noir prolongent le graphite. Pour des designs bâtis sur une teinte à de nombreux niveaux de clarté, voir le dégradé monochrome.
Argent, acier et autres dégradés gris métalliques
Le métal n’est pas une couleur, c’est un reflet. Un dégradé argenté fonctionne grâce à une bande nette et brillante serrée entre des arrêts plus sombres, comme la lumière accroche une surface courbe. Le gunmetal emploie la même astuce à un niveau plus sombre, et l’acier brossé ajoute de fines lignes parallèles. Ils sont audacieux : réservez-les à un badge, une plaque de titre ou un seul panneau plutôt qu’à toute une page.
L’acier brossé rend mieux quand les lignes se posent sur un doux dégradé éclairé plutôt que seules. Deux couches suffisent :
.steel {
background-color: #b9bec4;
background-image:
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}Du gris plus une couleur
Peu de fonds mettent aussi bien en valeur une seule couleur forte que le gris. L’accent paraît plus vif contre le neutre que contre d’autres couleurs : un peu suffit donc largement, un mot, un bouton, une ligne. Choisissez l’accent selon le secteur et l’ambiance.
Hex
#3b82f6Se lit comme
Bon pour
Hex
#f97316Se lit comme
Bon pour
Hex
#a3e635Se lit comme
Bon pour
Hex
#f2c6c2Se lit comme
Bon pour
#c9a24aSe lit comme
Bon pour
Des schémas complets bâtis ainsi se trouvent dans les palettes de couleurs tech et les palettes de couleurs neutres.
Un gris qui paraît délibéré
Paraît inachevé
- Des gris purement neutres sans teinte
- Gris chauds et gris froids dans un seul fondu
- Des bandes visibles sur une surface lisse
- Trois ou quatre couleurs d’accent
- Un texte gris moyen sur un fond gris moyen
Paraît délibéré
- Une légère teinte bleue ou brune partout
- Une seule température du début à la fin
- Un grain fin sur tout le dégradé
- Un seul accent, employé avec parcimonie
- Un texte presque blanc ou presque noir, jamais gris moyen
Le banding mérite son propre avertissement. Les gris n’ont aucune teinte pour distraire l’œil : chaque palier d’un dégradé lisse se voit, surtout sur grand écran et après compression. Une légère couche de bruit le masque ; la texture de bruit CSS propose un extrait, et le banding des dégradés explique pourquoi il se produit.
Des dégradés gris sur les sites web et en mode sombre
Sur le web, les dégradés gris travaillent mieux en silence. Un dégradé brume derrière une section de fonctionnalités la sépare d’une page blanche sans bord dur. En mode sombre, un dégradé graphite qui s’éclaircit légèrement vers le haut d’une carte lui donne de la profondeur, là où un gris uni ressemblerait à un trou. Gardez l’écart entre arrêts faible, quelques pour cent de clarté, pour que le dégradé se lise comme de la lumière plutôt que de la décoration. Le design en mode sombre couvre les règles plus larges des interfaces sombres, des couleurs de surface au contraste.
Des fonds dégradés gris en pratique
Les architectes, les bureaux d’ingénierie et les éditeurs de logiciels emploient le gris parce qu’il laisse le travail parler. Un dégradé ardoise avec texte blanc et un seul accent bleu donne à une annonce de projet un air précis ; un dégradé pierre chaude avec texte graphite donne à une couverture de portfolio un aspect tactile. L’identité visuelle d’un cabinet d’architecture montre jusqu’où peut aller une palette sobre.
Une image de lien LinkedIn sur un Mark ardoise. Texte blanc du côté plus sombre ; la zone éclairée reste loin des mots.
Les fonds subtils sont là où un système de design porte ses fruits. Dans Gradiently, un Mark gris porte son propre grain, qui tient le banding à distance, et l’encre Auto choisit un texte clair ou foncé ligne par ligne à mesure que le gris change sur le cadre.
Les questions qu’on nous pose
Comment rendre un dégradé gris moins ennuyeux ?
Teintez légèrement les gris vers le froid ou le chaud, éclairez le dégradé d’un côté, ajoutez un grain fin et employez un seul accent de couleur saturé.
Quel est le CSS d’un dégradé argenté ?
Employez une bande brillante entre des arrêts plus sombres, par exemple linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%).
Dit-on gris ou gray pour un dégradé ?
En français, on écrit gris. Gray est l’orthographe américaine et grey la britannique ; elles désignent exactement la même couleur.
Quelle couleur va le mieux avec un dégradé gris ?
Un seul accent fort : bleu électrique ou citron vert avec les gris froids, orange signal, rose poudré ou laiton avec les gris chauds.
Pourquoi mon dégradé gris a-t-il des rayures ?
Les fondus de gris lisses montrent chaque palier de couleur, surtout après compression. Ajoutez une légère couche de bruit et exportez en PNG.
É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