# Dégradé gris : codes neutres pas ennuyeux

[Canonical HTML page](https://gradiently.design/fr/guide/grey-gradient)

Le gris est la couleur qu’on choisit quand on ne veut pas choisir. Teinté, éclairé et associé à un seul accent, il devient l’un des fonds les plus assurés qui soient.

## The short version

- 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é.

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.

- Brume: #f4f6f8
- Brouillard froid: #aeb6be
- Ardoise: #4a535d
- Tempête: #22272c
- Craie: #f3f1ee
- Béton: #b5b1ab
- Étain: #5f5b56
- Graphite: #1c1c1e

Quatre gris froids et quatre gris chauds. Le graphite est proche du neutre, c’est pourquoi il s’associe à presque tout.

## 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.

- Brume: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Ardoise: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Tempête: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Pierre chaude: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Béton: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Graphite: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Six gris dotés d’une température. La tempête et le graphite portent un texte blanc ; la brume, la pierre et le béton veulent un texte foncé.

Si vous allez encore plus foncé, les codes de [dégradé noir](https://gradiently.design/fr/guide/black-gradient) prolongent le graphite. Pour des designs bâtis sur une teinte à de nombreux niveaux de clarté, voir [le dégradé monochrome](https://gradiently.design/fr/guide/monochrome-gradient).

## 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.

- Argent poli: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Gunmetal: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Étain: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Lignes d’acier brossé: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Des gris métalliques. Plus la bande brillante est serrée, plus le métal paraît brillant ; étalez-la et il devient satiné.

L’acier brossé rend mieux quand les lignes se posent sur un doux dégradé éclairé plutôt que seules. Deux couches suffisent :

```css
.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%);
}
```

De fines lignes blanches tous les trois pixels sur un fondu d’argent éclairé. Changez l’angle de la seconde couche pour déplacer l’endroit où tombe la lumière.

## 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.

| Accent | Hex | Se lit comme | Bon pour |
| --- | --- | --- | --- |
| Bleu électrique | `#3b82f6` | Technique, fiable | Logiciels, fintech, données |
| Orange signal | `#f97316` | Industriel, énergique | Construction, outils, logistique |
| Citron vert | `#a3e635` | Sportif, frais | Fitness, course, matériel de plein air |
| Rose poudré | `#f2c6c2` | Doux, à la mode | Mode, beauté, lifestyle |
| Laiton | `#c9a24a` | Haut de gamme, classique | Architecture, montres, hôtels |

Employez les gris froids avec le bleu et le citron vert, les gris chauds avec l’orange, le rose poudré et le laiton.

Des schémas complets bâtis ainsi se trouvent dans [les palettes de couleurs tech](https://gradiently.design/fr/guide/tech-color-palettes) et [les palettes de couleurs neutres](https://gradiently.design/fr/guide/neutral-color-palettes).

## 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](https://gradiently.design/fr/guide/css-noise-texture) propose un extrait, et [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) 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](https://gradiently.design/fr/guide/dark-mode-design) 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](https://gradiently.design/fr/guide/architecture-firm-branding) montre jusqu’où peut aller une palette sobre.

Une large image LinkedIn avec un fond dégradé gris ardoise froid et les mots « Conçu pour durer » en blanc

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.

## FAQ

### 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.