# Gradiente marrone: codici caffè, caramello e terra

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

Il marrone ha fama di sembrare spento, ma quasi ogni bel gradiente marrone si nasconde in una tazza di caffè o in un laboratorio di ceramica. Ecco come tenerlo caldo, con i codici per ogni atmosfera.

## The short version

- Il marrone è un arancione scuro e poco saturo, quindi un buon gradiente marrone mantiene una tinta arancione o rossa dall’inizio alla fine.
- I gradienti marroni sembrano spenti quando scivolano verso il grigio o il verde; sembrano ricchi quando restano caldi.
- I gradienti caffè vanno da un espresso quasi nero a una crema chiara, mentre quelli caramello sono più chiari e più dorati.
- Interpolare un gradiente marrone in OKLCH evita che il centro diventi spento, utile per le sfumature lunghe.
- Crema, verde salvia, blu polvere e senape sono compagni affidabili del marrone per testi e accenti.

Un **gradiente marrone** è in realtà un arancione scuro e addolcito, sfumato dal profondo al chiaro: espresso in crema, cioccolato in caramello, argilla in sabbia. Se questa tinta calda attraversa ogni punto, il marrone appare ricco, accogliente e curato. Se scivola verso il grigio o il verde, sembra fango. Qui sotto trovi i codici per marroni caffè, caramello, cioccolato, terra e whisky, e gli abbinamenti che stanno loro bene.

## Perché i gradienti marroni diventano fangosi

Nell’arcobaleno non c’è il marrone. Quello che chiamiamo marrone è arancione o rosso con la luminosità abbassata e la saturazione ammorbidita. Ne consegue una cosa pratica: se un punto del gradiente perde calore, perché ha troppo grigio o un accenno di verde, tutta la sfumatura sembra sporca. Tieni ogni punto sul lato caldo e scurisci abbassando la luminosità invece di aggiungere nero. [Gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) mostra l’effetto affiancato.

- Espresso: #1b0f0a
- Tostatura scura: #3b2216
- Caffè: #6b3f26
- Toffee: #a85f24
- Caramello: #e0a15a
- Terracotta: #c0603a
- Crema: #f3e3cc

Una famiglia di marroni caldi. Ogni campione, anche il più scuro, ha ancora un po’ di arancione dentro.

Puoi costruire un gradiente marrone tutto tuo partendo da qualsiasi arancione in un selettore di colore che mostri tinta, saturazione e luminosità. Bastano quattro mosse:

1. **Scegli una tinta calda** Scegli una tinta tra circa 20 e 40 gradi: più bassa per i marroni rossastri come mattone e terracotta, più alta per quelli dorati come il caramello.
2. **Ammorbidisci la saturazione** Porta la saturazione tra il 35% e il 65%. Se è piena, resta arancione; se è troppo bassa, diventa grigio.
3. **Imposta tre punti di luminosità** Usa la stessa tinta a tre livelli di luminosità, per esempio 10%, 30% e 60%. È questa ampiezza a rendere visibile la sfumatura.
4. **Scalda un po’ l’estremo chiaro** Sposta il punto più chiaro di qualche grado verso il giallo. La luce vera su legno, caffè o argilla appare più calda nelle alte luci.

## Codici per gradienti caffè

I marroni caffè sono i più utili della serie. L’espresso è quasi nero e regge un testo chiaro con vera profondità. La colata di crema va dalla schiuma pallida in cima alla tazza fino al caffè sotto. Il moka sta nel mezzo e crea uno sfondo solido e neutro per menu e listini.

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

Tre gradienti caffè. La colata di crema vuole testo scuro in alto e testo chiaro in basso, quindi metti le parole in una sola zona.

Bar e torrefazioni troveranno un’identità completa costruita su questi toni in [brand per caffetterie](https://gradiently.design/it/guide/coffee-shop-branding), e idee per sacchetti ed etichette in [packaging per torrefazioni](https://gradiently.design/it/guide/coffee-roaster-packaging).

## Codici per gradienti caramello e cioccolato

Il caramello è il marrone al suo massimo di dorato e di simpatia. Brilla, ed è ideale per panifici, miele, offerte autunnali e tutto ciò che è dolce. Il cioccolato è l’opposto: profondo, lucido e goloso. Un gradiente radiale con una morbida luce dà al cioccolato la lucentezza che ha nella realtà.

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

Marroni dolci e golosi. Il whisky è un caramello illuminato dall’interno, il gradiente più scenografico di questo articolo.

## Gradienti terra, argilla e terracotta

I marroni terra tendono al rosso e sanno di fatto a mano: argilla, mattone, cuoio, noce. Stanno bene su ceramiche, negozi di piante, attrezzatura outdoor e tutto ciò che ha un sapore naturale o mediterraneo. La terracotta in particolare è diventata una favorita dei brand caldi e moderni perché sembra insieme terrosa e fresca.

- Terracotta: `linear-gradient(150deg, #e9a27c 0%, #c0603a 50%, #7a3520 100%)`
- Argilla del deserto: `linear-gradient(180deg, #e7c3a1 0%, #b97a52 55%, #6e4129 100%)`
- Noce e cuoio: `linear-gradient(135deg, #4a2c1a 0%, #7b4a2b 50%, #b07a4f 100%)`

Marroni terra. La terracotta è il più luminoso e ha meno bisogno dell’aiuto degli accenti.

Per allargarli a uno schema completo, guarda i [colori terra](https://gradiently.design/it/guide/earth-tone-colors) e le [palette di colori autunnali](https://gradiently.design/it/guide/autumn-color-palettes). Per l’estremo più chiaro della famiglia, sabbia e avena, i codici del [gradiente beige](https://gradiently.design/it/guide/beige-gradient) riprendono dall’argilla del deserto.

## Mantenere caldo in CSS un lungo gradiente marrone

I gradienti del browser si fondono in sRGB per impostazione predefinita, e una lunga sfumatura da un marrone profondo a un caramello pallido può cedere in un centro un po’ grigiastro. Chiedere al browser di interpolare in OKLCH mantiene più stabili tinta e croma da un capo all’altro. È supportato nelle versioni attuali dei principali browser, e il fallback in hex copre gli altri.

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

La stessa sfumatura da espresso a caramello, scritta due volte. I browser che capiscono la seconda riga la usano; gli altri tengono la prima.

[Gradienti CSS in OKLCH](https://gradiently.design/it/guide/css-gradient-oklch) spiega lo spazio colore e quando vale la riga in più.

## Che cosa abbinare a un gradiente marrone

| Compagno | Hex | Atmosfera | Provalo su |
| --- | --- | --- | --- |
| Crema | `#f6efe4` | Classico, accogliente | Menu di bar, post di panifici |
| Verde salvia | `#a3b18a` | Naturale, calmo | Negozi di piante, benessere, tè |
| Blu polvere | `#8aa1b4` | Fresco, inatteso | Ceramiche, denim, casalinghi |
| Senape | `#d6a23a` | Retrò, caldo | Dischi, vintage, saldi autunnali |
| Rosa cipria | `#e8c4b8` | Morbido, moderno | Bellezza, candele, cartoleria |

Usa il compagno per il testo o per un solo accento. Il blu è la scelta più audace perché sta di fronte all’arancione, e fa sembrare il marrone più caldo.

## Un gradiente marrone in un post reale

Gli sfondi marroni portano particolarmente bene le notizie calde di ogni giorno: una nuova tostatura, un dolce di stagione, un laboratorio. Il testo crema sull’estremo scuro è la scelta sicura, e un accento senape o caramello su una parola aggiunge un po’ di energia. [Idee Instagram per panifici](https://gradiently.design/it/guide/bakery-instagram-ideas) ha un mese di post adatti a questi toni.

Un post verticale con sfondo marrone caffè profondo e le parole Nuova tostatura, martedì in testo color crema

L’annuncio di una torrefazione in un Mark color caffè. Il testo crema sta sulla parte più scura dello sfondo.

Se pubblichi ogni settimana, la parte difficile è tenere ogni post nello stesso marrone caldo. Con Gradiently scegli una volta un Mark marrone caldo e ogni modello, storia e menu lo indossa, mentre l’inchiostro automatico sceglie testo crema o espresso per ogni riga, così nulla si perde negli angoli più scuri.

## FAQ

### Quali colori formano un gradiente marrone?

Marroni caldi della stessa famiglia, come espresso #1b0f0a, caffè #6b3f26 e caramello #e0a15a. Tieni ogni punto sul lato arancione o rosso perché la sfumatura resti ricca.

### Perché il mio gradiente marrone sembra spento?

Uno o più punti sono scivolati verso il grigio o il verde. Scurisci i marroni abbassando la luminosità invece di aggiungere nero, e mantieni la tinta calda.

### Che colore di testo va su uno sfondo marrone?

Crema o bianco caldo sui marroni scuri, ed espresso o antracite sul caramello chiaro e sulla sabbia. La senape va bene per una sola parola di accento.

### Qual è un buon gradiente color caffè?

Prova `linear-gradient(180deg, #f3e3cc 0%, #c99a6b 45%, #6b3f26 100%)`, che va dalla crema in alto al caffè in basso.