# Dégradé beige : codes de neutres chauds et apaisants

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

Le beige est facile à presque réussir et étonnamment difficile à réussir vraiment. L’astuce : choisir une sous-teinte, garder assez d’amplitude pour montrer le fondu, et lui donner de la texture.

## The short version

- Un dégradé beige paraît calme et coûteux quand chaque arrêt partage une seule sous-teinte : rose, jaune ou grise.
- Les dégradés beige demandent une amplitude de clarté plus large qu’on ne croit, sinon le fondu disparaît et le design paraît plat.
- Les dégradés clairs et peu contrastés forment facilement des bandes à l’écran, et une fine couche de grain est le remède le plus fiable.
- Des bruns foncés chauds comme l’espresso se lisent mieux sur le beige que le noir pur, et le texte blanc y marche rarement.
- Les dégradés de sable vont de la crème pâle à un or grillé, comme une dune s’assombrit du côté de l’ombre.

Un **dégradé beige** fond des neutres chauds, crème, sable, avoine et lin, d’un ton clair à un ton un peu plus profond, tous partageant la même sous-teinte. Bien fait, il paraît calme, naturel et discrètement haut de gamme, ce qui fait aimer le beige aux soins de la peau, à la décoration, aux mariages et à la mode lente. Mal fait, il ressemble au scan d’une vieille enveloppe. La différence tient à trois choix : une sous-teinte, assez d’amplitude et un peu de texture. Les codes de chaque look suivent.

## Choisissez une sous-teinte avant une couleur

Chaque beige penche quelque part. Les beiges roses sont doux et rappellent la peau. Les beiges jaunes sont ensoleillés et sableux. Les beiges gris, souvent appelés greige, paraissent architecturaux et frais. Mêler les sous-teintes dans un dégradé est la principale raison pour laquelle le beige paraît sale : un arrêt rose à côté d’un gris se lit comme une tache plutôt qu’un fondu. Décidez d’abord, puis restez-y.

- Lin: #faf6ef
- Beige poudré: #ecd3c6
- Sable rosé: #d4ae9c
- Sable: #e8cfa8
- Dune de miel: #c9a273
- Greige: #ddd6cc
- Pierre: #b9b0a3
- Encre espresso: #3b2a1e

Trois familles de sous-teintes : rose dans le duo poudré, jaune dans le duo sable, gris dans greige et pierre. Le lin et l’espresso vont avec les trois.

## Codes de dégradé de sable

Un **dégradé de sable** suit une dune : clair et crémeux du côté exposé au soleil, plus profond et plus doré du côté de l’ombre. Ce sont ici les beiges les plus chauds et les plus indulgents, car la sous-teinte jaune les empêche de virer au gris.

- Dune de sable: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Midi du désert: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Ombre de dune: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Sable mouillé: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Quatre looks de sable. L’ombre de dune a la plus grande amplitude et tient le mieux en petite taille ; le midi du désert est le plus lumineux et convient à un texte foncé partout.

## Codes de lin, d’avoine et de pierre

Ce sont les beiges plus discrets, plus proches de la crème et du greige. Ils font d’excellents fonds pour les photos produit et la lecture longue, car ils s’effacent et laissent tout le reste mener. Le lin est le plus subtil, à peine un dégradé ; le beige poudré apporte la sous-teinte rose ; la pierre est la plus froide, presque grise.

- Lin: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Latte d’avoine: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Beige poudré: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Pierre: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Des neutres doux. Si un dégradé beige ressemble à une couleur unie sur votre écran, l’amplitude est trop faible : approfondissez le dernier arrêt.

Pour la famille plus large des tons apaisants, voir [les palettes de couleurs neutres](https://gradiently.design/fr/guide/neutral-color-palettes) et [les couleurs terre](https://gradiently.design/fr/guide/earth-tone-colors). Quand vous voulez l’extrémité plus profonde de la même famille, café et caramel, les codes de [dégradé marron](https://gradiently.design/fr/guide/brown-gradient) continuent là où ceux-ci s’arrêtent.

## Pourquoi les dégradés beige forment des bandes, et comment y remédier

Les dégradés clairs à faible amplitude ne passent que par une poignée de valeurs de couleur distinctes : un écran les dessine donc en paliers visibles, et une forte compression aggrave le phénomène. Le beige y est particulièrement sujet. Une fine couche de grain brise les paliers et, en prime, donne au beige un air de papier, de plâtre ou de tissu plutôt que de couleur d’écran. [Le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) en explique la cause en détail.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Un dégradé de sable avec une couche de bruit SVG en multiplication par-dessus. Augmentez l’opacité pour une surface plus rugueuse, plus papier.

D’autres recettes de grain, et jusqu’où aller, sont dans [les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients). Les Marks Gradiently portent le grain dans leur recette : un Mark beige arrive donc avec sa texture déjà équilibrée à chaque taille.

## Couleurs de texte qui conviennent au beige

| Encre | Hex | Effet | À utiliser pour |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Chaud et doux, toujours très lisible | Titres et corps sur tout beige |
| Anthracite | `#2b2b2b` | Net et moderne | Fonds pierre et greige |
| Olive profond | `#3d4a2f` | Naturel, un peu inattendu | Fonds sable et avoine |
| Terracotta | `#a4502f` | Accent chaud | Grands titres et prix seulement |
| Blanc | `#ffffff` | Faible sur beige clair | Grands titres sur les arrêts d’ombre de dune les plus profonds seulement |

Le noir marche, mais le brun espresso garde tout le design dans la même famille chaude.

## Un beige calme, pas terne

### Paraît terne

- Des beiges roses, jaunes et gris dans un même fondu
- Deux arrêts si proches que le fondu est invisible
- Une surface numérique propre avec des bandes visibles
- Un texte noir pur et une mise en page chargée
- Du texte blanc sur du sable clair

### Paraît calme

- Une seule sous-teinte sur tous les arrêts
- Une amplitude nette de la crème au sable grillé
- Un grain fin qui se lit comme du papier ou du plâtre
- Un texte espresso et de l’espace généreux
- Une encre foncée, avec un seul accent terracotta

Le beige récompense la retenue. Peu de mots, beaucoup d’espace et une seule belle photo produit paraîtront plus chers que n’importe quelle décoration. C’est le look derrière la plupart des beaux [designs de marque de soins de la peau](https://gradiently.design/fr/guide/skincare-brand-design), et il se transpose bien à la papeterie de mariage et aux studios de décoration.

Un post portrait sur fond couleur sable chaud avec les mots « Moins, mais mieux » en texte brun foncé

Un post de lancement de soin avec un Mark sable. Texte espresso, une ligne, beaucoup d’air.

## Où un dégradé beige gagne sa place

Le beige travaille le plus là où il soutient autre chose : un produit, une photo, quelques mots soignés. Quelques endroits où il brille, avec les tailles auxquelles concevoir :

- **Photos produit :** un dégradé lin ou avoine derrière un flacon ou une pièce de céramique, en 2048×2048 pour une image produit Shopify, garde l’objet en vedette.
- **Papeterie de mariage :** beige poudré ou sable pour des invitations de 5×7 pouces (1500×2100 à 300 dpi), avec un texte espresso ou olive profond. D’autres idées dans [les palettes de couleurs de mariage](https://gradiently.design/fr/guide/wedding-color-palettes).
- **Décoration et architecture :** des dégradés pierre et greige pour les couvertures de portfolio et les posts de projets, où la photographie apporte la couleur. Voir [l’identité visuelle d’un décorateur d’intérieur](https://gradiently.design/fr/guide/interior-designer-branding).
- **Sections de site :** un dégradé lin derrière un témoignage ou une grille de tarifs la sépare des sections blanches sans bordure dure.
- **Une grille Instagram apaisée :** alternez des posts sable et des photos et le fil se lit comme un tout réfléchi.

Le beige étant si subtil, le même dégradé peut paraître juste sur une story et délavé sur une large bannière. Recalculez-le pour chaque format plutôt que d’étirer un fichier, et vérifiez l’arrêt le plus clair sur un téléphone à pleine luminosité, où un beige pâle peut dériver vers le blanc pur.

## FAQ

### Quelles couleurs composent un dégradé beige ?

Des tons de crème, de sable, d’avoine et de lin partageant une seule sous-teinte, par exemple #f6ead6 vers #e8cfa8 vers #c9a273 pour un dégradé de sable chaud.

### Pourquoi mon dégradé beige paraît-il sale ?

Il mêle en général des sous-teintes, comme un beige rose à côté d’un beige gris. Gardez chaque arrêt dans la même famille.

### Quelle couleur de police sur fond beige ?

Un brun foncé chaud comme l’espresso #3b2a1e se lit clairement et paraît plus doux que le noir. L’anthracite convient aux tons greige plus froids.

### Comment éviter qu’un dégradé clair forme des bandes ?

Élargissez l’amplitude entre le premier et le dernier arrêt, ajoutez une fine couche de grain sur le dégradé et exportez en PNG plutôt qu’en JPEG compressé.