# Colori caldi e freddi: usare la temperatura con intenzione

[Canonical HTML page](https://gradiently.design/it/guide/warm-and-cool-colors)

Ogni colore ha una temperatura, compresi i tuoi grigi e i tuoi bianchi. Impara a leggerla e potrai far sembrare un design più vicino, più calmo o più luminoso senza cambiare una sola tinta.

## The short version

- I colori caldi e freddi sono le due metà della ruota dei colori: rossi, arancioni e gialli sembrano caldi, mentre verdi, blu e viola sembrano freddi.
- La temperatura è relativa, quindi un viola sembra caldo accanto al blu e freddo accanto all’arancione.
- I colori caldi tendono a sembrare più vicini ed energici, mentre quelli freddi tendono ad allontanarsi e a calmare, ed è per questo che le colline lontane nei paesaggi sembrano blu.
- Anche grigi e bianchi hanno una temperatura, e mescolare per sbaglio neutri caldi e freddi è un motivo comune per cui un design sembra leggermente stonato.
- Un gradiente dal caldo al freddo resta pulito quando passa per un vicino comune come il rosa o il viola, invece che per il grigio.

I **colori caldi e freddi** sono le due metà della ruota dei colori. Rossi, arancioni e gialli sembrano caldi, come il fuoco e la luce del sole; verdi, blu e viola sembrano freddi, come l’acqua, l’ombra e la sera. La temperatura cambia la sensazione di un design prima ancora che qualcuno lo legga: i colori caldi vengono avanti ed energizzano, quelli freddi si ritirano e calmano. Usarla con intenzione è uno dei modi più rapidi per far sembrare voluta una palette.

- Rosso caldo: #d7263d
- Arancione caldo: #f46036
- Giallo caldo: #f7b32b
- Verde freddo: #2e9e6f
- Blu freddo: #1b7fbd
- Viola freddo: #5b3cc4

Tre colori caldi e tre freddi da lati opposti della ruota. Il confine corre all’incirca tra il giallo verde e il rosso viola.

## La temperatura è relativa

La linea tra caldo e freddo non è fissa. I giallo verdi e i rosso viola stanno sul confine, e qualsiasi colore sembra più caldo accanto a uno più freddo. Un magenta accanto a un azzurro cielo sembra caldo; lo stesso magenta accanto all’arancione sembra freddo. Per questo la temperatura va giudicata nella palette, non campione per campione.

- Magenta accanto al blu: caldo: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)`
- Magenta accanto all’arancione: freddo: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)`

Lo stesso magenta a destra in entrambi. La sua temperatura cambia con il vicino.

I colori hanno una temperatura anche *all’interno* di una tinta. Un rosso che tende all’arancione è più caldo di un rosso che tende al blu, e un blu con un tocco di verde è più caldo di uno che tende al viola. I designer chiamano questa tendenza sottotono, ed è ciò che fa stonare due «rossi».

## Come i colori caldi e freddi creano profondità

I colori caldi tendono a sembrare più vicini e quelli freddi più lontani. I paesaggisti lo usano da secoli: l’aria diffonde la luce, quindi le colline lontane sembrano davvero più blu e più pallide, e i nostri occhi leggono il freddo e il pallido come lontano. Puoi prendere in prestito lo stesso effetto nel design piatto.

| Qualità | Colori caldi | Colori freddi |
| --- | --- | --- |
| Spazio | Vengono avanti, sembrano vicini | Si ritirano, sembrano lontani |
| Energia | Attivi, urgenti, sociali | Calmi, stabili, concentrati |
| Ideali per | Pulsanti, prezzi, titoli, cibo | Sfondi, grandi aree, dati, salute |
| In grandi quantità | Possono sembrare rumorosi o soffocanti | Possono sembrare freddi o distanti |
| Nella luce | Pochi Kelvin, come una lampadina da 2700 K | Molti Kelvin, come la luce di un giorno nuvoloso |

Tendenze, non leggi. Saturazione e luminosità possono ribaltare la temperatura: un pesca pallido si allontana più di un blu elettrico.

La regola pratica: metti i colori freddi nelle grandi aree di sfondo e riserva quelli caldi a ciò che deve raggiungere per primo chi guarda. Un invito all’azione caldo su una pagina fredda risalta senza bisogno di essere grande, cosa che si sposa bene con la [regola 60-30-10](https://gradiently.design/it/guide/60-30-10-rule).

## Neutri caldi e freddi

Anche grigi, bianchi e neri hanno una temperatura, e conta più di quanto si pensi. Un bianco sporco caldo sembra carta; un bianco freddo sembra uno schermo o un ambulatorio. Un design che unisce uno sfondo grigio caldo a un testo grigio freddo spesso sembra leggermente sbagliato senza che nessuno sappia dire perché.

- Carta calda: #f5efe6
- Pietra calda: #b8ada0
- Antracite caldo: #3d3530
- Nebbia fredda: #eef2f6
- Ardesia fredda: #a3adb8
- Antracite freddo: #2b3240

I neutri caldi tendono al marrone e al crema, quelli freddi al blu. Scegli una sola famiglia per un intero design.

```css
:root {
  /* Warm neutrals: pair with reds, oranges, golds */
  --paper: #f5efe6;
  --stone: #b8ada0;
  --charcoal-warm: #3d3530;

  /* Cool neutrals: pair with blues, greens, violets */
  --mist: #eef2f6;
  --slate: #a3adb8;
  --charcoal-cool: #2b3240;
}
```

Tenere i neutri in insiemi caldi e freddi con un nome rende facile individuare le mescolanze accidentali durante la revisione del codice.

## Unire caldo e freddo in un solo gradiente

I gradienti dal caldo al freddo sono tra i più suggestivi che esistano, e i tramonti lo dimostrano. Sono anche quelli con più probabilità di andare storti, perché colori caldi e freddi spesso stanno uno di fronte all’altro sulla ruota e una sfumatura diretta tra loro passa per il grigio. La soluzione è far passare la sfumatura per un colore che appartiene a entrambi i lati, di solito rosa, magenta o viola.

- Da arancione a blu, diretto: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Da arancione a blu passando per il rosa: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Crepuscolo: freddo sopra, caldo sotto: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Da giallo a verde passando per il lime: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

La sfumatura diretta scende in un centro spento. Le altre passano per un vicino comune, così ogni punto lungo il percorso è un colore vero. [I gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients) spiega la geometria.

Anche qui contano le proporzioni. Lascia che una temperatura guidi e che l’altra compaia come contrasto. Un gradiente prevalentemente freddo con un bagliore caldo su un bordo sembra la luce della sera; una divisione equa tra caldo e freddo sembra indecisa. [I gradienti tramonto](https://gradiently.design/it/guide/sunset-gradient) ha molti altri esempi di caldo e freddo che condividono uno stesso campo.

## Colori caldi e freddi nel design di tutti i giorni

- **La lavagna del menu di un caffè:** sfondo crema caldo, testo color espresso e un solo accento terracotta, così sembra la sala in cui è appesa
- **Un’app bancaria:** superfici ardesia e blu fredde, con un solo ambra caldo per gli avvisi che richiedono attenzione
- **Il poster di un evento serale:** un campo viola profondo e freddo con un titolo arancione caldo che salta in avanti
- **Il lancio di una linea skincare:** nebbia fredda e salvia, ravvivate da un solo pesca caldo per il nome del prodotto
- **Una promo sportiva:** rosso e arancione caldi in primo piano, un blu navy freddo solo per le note in piccolo

In ogni caso una temperatura stabilisce il clima e l’altra dirige l’attenzione. Questo abbinamento è anche una forma delicata di contrasto tra [colori complementari](https://gradiently.design/it/guide/complementary-colors), senza lo scontro pieno dei veri opposti.

## Scegliere una temperatura per il tuo brand

1. **Parti dalla sensazione** I brand accoglienti, vivaci e pratici di solito tendono al caldo. Quelli precisi, calmi e affidabili di solito tendono al freddo. Nessuna delle due è migliore; scegli quella che corrisponde a ciò che fai.
2. **Scegli una temperatura guida** Costruisci gran parte della palette, neutri compresi, su un solo lato. Dà al brand un clima coerente.
3. **Aggiungi un accento dall’altro lato** Un solo accento caldo su un brand freddo, o uno freddo su un brand caldo, dà contrasto e un punto chiaro in cui far cadere lo sguardo.
4. **Prova nel contesto** Controlla la palette sugli schermi e sui materiali reali su cui vivrà. I colori cambiano da uno schermo all’altro e di nuovo in stampa; vedi [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors).

## FAQ

### Cosa sono i colori caldi e freddi?

I colori caldi sono rossi, arancioni e gialli; quelli freddi sono verdi, blu e viola. I colori di confine, giallo verde e rosso viola, possono sembrare dell’una o dell’altra famiglia a seconda dei vicini.

### Il viola è un colore caldo o freddo?

Dipende dalla sua tendenza e dai suoi vicini. I viola rossastri e i magenta sembrano caldi accanto al blu, mentre i blu viola sembrano freddi, e qualsiasi viola sembra freddo accanto all’arancione.

### I colori caldi vengono davvero avanti?

Tendono a sembrare più vicini, soprattutto quando sono saturi, mentre i colori freddi e pallidi tendono ad allontanarsi. Luminosità e saturazione possono prevalere sull’effetto.

### Si possono unire colori caldi e freddi in un design?

Sì. Lascia che una temperatura guidi, usa l’altra come accento, e nei gradienti passa per un vicino comune come il rosa o il viola per evitare un centro grigio.