# Dégradé marron : codes café, caramel et terre

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

Le marron a la réputation de paraître terne, mais presque tout bon dégradé marron se cache dans une tasse de café ou un atelier de poterie. Voici comment le garder chaud, avec des codes pour chaque ambiance.

## The short version

- Le marron est un orange sombre et peu saturé : un bon dégradé marron garde donc une teinte orange ou rouge d’un bout à l’autre.
- Les dégradés marron paraissent ternes quand ils dérivent vers le gris ou le vert ; ils paraissent riches quand ils restent chauds.
- Les dégradés café vont d’un espresso presque noir à une crema pâle, tandis que les dégradés caramel sont plus clairs et plus dorés.
- Interpoler un dégradé marron en OKLCH évite que le milieu devienne terne, ce qui sert pour les longs fondus.
- La crème, le vert sauge, le bleu poussiéreux et la moutarde sont des partenaires fiables du marron pour le texte et les accents.

Un **dégradé marron** est en réalité un orange sombre et adouci, fondu du profond au clair : espresso vers crema, chocolat vers caramel, argile vers sable. Gardez cette teinte chaude dans chaque arrêt et le marron paraît riche, douillet et travaillé. Laissez-le glisser vers le gris ou le vert et il ressemble à de la boue. Voici des codes pour les marrons café, caramel, chocolat, terre et whisky, et les associations qui leur conviennent.

## Pourquoi les dégradés marron deviennent boueux

Il n’y a pas de marron dans l’arc-en-ciel. Ce qu’on appelle marron est de l’orange ou du rouge dont on a baissé la clarté et adouci la saturation. D’où une conséquence pratique : si un arrêt de votre dégradé perd sa chaleur, parce qu’il contient trop de gris ou un soupçon de vert, tout le fondu se lit comme sale. Gardez chaque arrêt du côté chaud, et assombrissez en baissant la clarté plutôt qu’en ajoutant du noir. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) montrent l’effet côte à côte.

- Espresso: #1b0f0a
- Torréfaction foncée: #3b2216
- Café: #6b3f26
- Toffee: #a85f24
- Caramel: #e0a15a
- Terracotta: #c0603a
- Crema: #f3e3cc

Une famille de marrons chauds. Chaque pastille, même la plus sombre, garde un peu d’orange.

Vous pouvez construire votre propre dégradé marron à partir de n’importe quel orange dans un sélecteur de couleur qui affiche teinte, saturation et clarté. Il faut quatre gestes :

1. **Choisissez une teinte chaude** Prenez une teinte entre environ 20 et 40 degrés : plus bas pour les marrons rougeâtres comme la brique et le terracotta, plus haut pour les dorés comme le caramel.
2. **Adoucissez la saturation** Ramenez la saturation entre 35 % et 65 %. Entièrement saturé, il reste orange ; trop bas, il vire au gris.
3. **Fixez trois arrêts de clarté** Employez la même teinte à trois niveaux de clarté, par exemple 10 %, 30 % et 60 %. Cet écart rend le fondu visible.
4. **Réchauffez l’extrémité claire** Décalez l’arrêt le plus clair de quelques degrés vers le jaune. La vraie lumière sur le bois, le café ou l’argile paraît plus chaude dans les hautes lumières.

## Codes de dégradé café

Les marrons café sont les plus utiles de la série. L’espresso est presque noir et porte un texte clair avec une vraie profondeur. Le versé de crema va de la mousse pâle au sommet d’une tasse au café en dessous. Le moka se tient entre les deux et fait un fond neutre et solide pour les menus et les listes de prix.

- Espresso: `linear-gradient(160deg, #1b0f0a 0%, #3b2216 50%, #6b3f26 100%)`
- Versé de crema: `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`
- Moka: `linear-gradient(135deg, #2a1810 0%, #5a3522 45%, #9b6a4a 100%)`

Trois dégradés café. Le versé de crema demande un texte foncé en haut et un texte clair en bas : placez donc les mots dans une seule zone.

Les cafés et les torréfacteurs trouveront une identité complète bâtie sur ces tons dans [l’identité visuelle d’un coffee shop](https://gradiently.design/fr/guide/coffee-shop-branding), et des idées de sacs et d’étiquettes dans [l’emballage de torréfacteur](https://gradiently.design/fr/guide/coffee-roaster-packaging).

## Codes de dégradé caramel et chocolat

Le caramel est le marron à son plus doré et son plus amical. Il rayonne, ce qui le rend idéal pour les boulangeries, le miel, les offres d’automne et tout ce qui est sucré. Le chocolat est l’opposé : profond, brillant et gourmand. Un dégradé radial avec une douce lumière donne au chocolat le lustre qu’il a dans la vie.

- Caramel: `linear-gradient(160deg, #fbe3b8 0%, #e0a15a 45%, #a85f24 100%)`
- Toffee: `linear-gradient(180deg, #d99a4e 0%, #a8652a 50%, #5c3415 100%)`
- Chocolat noir: `radial-gradient(circle at 30% 30%, #6b3a22 0%, #3a1d10 50%, #160905 100%)`
- Whisky dans le verre: `radial-gradient(ellipse at 60% 30%, #f0b45c 0%, #b8661e 35%, #5a2a0c 70%, #1f0d04 100%)`

Des marrons doux et gourmands. Le whisky est un caramel éclairé de l’intérieur, le dégradé le plus dramatique de cet article.

## Dégradés terre, argile et terracotta

Les marrons terre penchent vers le rouge et paraissent faits main : argile, brique, cuir, noyer. Ils conviennent à la céramique, aux boutiques de plantes, au matériel de plein air et à tout ce qui a un air naturel ou méditerranéen. Le terracotta en particulier est devenu un favori des marques chaleureuses et modernes car il se lit à la fois terrien et frais.

- Terracotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Argile du désert: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Noyer et cuir: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Des marrons terre. Le terracotta est le plus vif et a le moins besoin d’aide des accents.

Pour les élargir en un schéma complet, voir [les couleurs terre](https://gradiently.design/fr/guide/earth-tone-colors) et [les palettes de couleurs d’automne](https://gradiently.design/fr/guide/autumn-color-palettes). Pour l’extrémité plus claire de la famille, sable et avoine, les codes de [dégradé beige](https://gradiently.design/fr/guide/beige-gradient) prennent le relais à partir de l’argile du désert.

## Garder un long fondu marron chaud en CSS

Les dégradés des navigateurs se fondent en sRGB par défaut, et un long fondu d’un marron profond à un caramel pâle peut s’affaisser en un milieu un peu grisâtre. Demander au navigateur d’interpoler en OKLCH garde la teinte et la chroma plus stables d’un bout à l’autre. C’est pris en charge par les versions actuelles des principaux navigateurs, et le repli en hex couvre les autres.

```css
.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}
```

Le même fondu espresso vers caramel, écrit deux fois. Les navigateurs qui comprennent la seconde ligne l’emploient ; les autres gardent la première.

[Les dégradés CSS en OKLCH](https://gradiently.design/fr/guide/css-gradient-oklch) explique l’espace colorimétrique et quand il vaut la ligne supplémentaire.

## Quoi associer à un dégradé marron

| Partenaire | Hex | Ambiance | À essayer sur |
| --- | --- | --- | --- |
| Crème | `#f6efe4` | Classique, douillet | Menus de café, posts de boulangerie |
| Vert sauge | `#a3b18a` | Naturel, calme | Boutiques de plantes, bien-être, thé |
| Bleu poussiéreux | `#8aa1b4` | Frais, inattendu | Céramique, denim, maison |
| Moutarde | `#d6a23a` | Rétro, chaleureux | Disques, vintage, soldes d’automne |
| Rose poudré | `#e8c4b8` | Doux, moderne | Beauté, bougies, papeterie |

Employez le partenaire pour le texte ou un seul accent. Le bleu est le choix le plus audacieux car il est opposé à l’orange : il fait paraître le marron plus chaud.

## Un dégradé marron dans un vrai post

Les fonds marron portent particulièrement bien les nouvelles chaleureuses du quotidien : une nouvelle torréfaction, une pâtisserie de saison, un atelier. Un texte crème sur l’extrémité profonde est le choix sûr, et un accent moutarde ou caramel sur un mot ajoute un peu d’énergie. [Les idées Instagram pour boulangerie](https://gradiently.design/fr/guide/bakery-instagram-ideas) offrent un mois de posts adaptés à ces tons.

Un post portrait avec un fond marron café profond et les mots « Nouvelle torréfaction, mardi » en texte crème

Une annonce de torréfacteur dans un Mark couleur café. Le texte crème se pose sur la partie la plus sombre du fond.

Si vous publiez chaque semaine, le plus dur est de garder chaque post dans le même marron chaud. Avec Gradiently, vous choisissez un Mark marron chaud une fois et chaque modèle, story et menu le porte, et l’encre Auto choisit un texte crème ou espresso pour chaque ligne : rien ne se perd dans les coins plus sombres.

## FAQ

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

Des marrons chauds d’une même famille, comme l’espresso #1b0f0a, le café #6b3f26 et le caramel #e0a15a. Gardez chaque arrêt du côté orange ou rouge pour que le fondu reste riche.

### Pourquoi mon dégradé marron paraît-il terne ?

Un ou plusieurs arrêts ont dérivé vers le gris ou le vert. Assombrissez les marrons en baissant la clarté plutôt qu’en ajoutant du noir, et gardez la teinte chaude.

### Quelle couleur de texte sur un fond marron ?

De la crème ou du blanc chaud sur les marrons foncés, et de l’espresso ou de l’anthracite sur le caramel clair et le sable. La moutarde convient pour un mot d’accent.

### Quel est un bon dégradé de couleur café ?

Essayez `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, qui va de la crema en haut au café en bas.