# Gradienti arancione e rosa: codici caldi oltre il tramonto

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

Arancione e rosa sono vicini di casa, e per questo formano uno dei mix più caldi e facili che esistano. La sfida non è mescolarli: è non sembrare l’ennesimo preset da tramonto.

## The short version

- Un gradiente arancione e rosa fonde tinte calde vicine come mandarino #f97316, corallo #fb7185 e rosa #ec4899, così il passaggio resta luminoso senza bisogno di un colore ponte.
- L’abbinamento è così legato ai tramonti che una semplice diagonale dall’arancione al rosa sembra un preset, e cambiare il fondo o la luminosità evita l’effetto.
- L’arancione acceso e il rosa shocking sono entrambi troppo chiari per un testo bianco piccolo, mentre un inchiostro rosso ruggine o marrone bruciato si legge bene sulle versioni più tenui.
- Le versioni terrose con terracotta e rosa antico sono calme e adulte, e quelle scure con brace e lampone danno un calore notturno.
- Arancione e rosa stanno bene a cibo, bevande, bellezza, campagne estive, viaggi e a ogni brand che vuole sembrare caldo e accogliente.

Un **gradiente arancione e rosa** fonde due vicini caldi: mandarino come `#f97316` o pesca come `#fed7aa` da un lato, rosa come `#ec4899` o cipria come `#fda4af` dall’altro, di solito con il corallo nel mezzo. Poiché le tinte sono affiancate, il passaggio non diventa mai fangoso. Quello che può diventare è prevedibile, perché la combinazione è la scorciatoia per dire tramonto. I codici qui sotto sono raggruppati per atmosfera, dalla pesca tenue alla brace scura, così puoi scegliere una versione che sembri tua e non lo sfondo di un telefono.

## I colori tra arancione e rosa

Se vai dall’arancione al rosa passi per corallo, salmone e anguria, tutti saturi e caldi. Schiarisci il percorso e trovi albicocca, pesca e cipria. Scuriscilo e trovi ruggine, terracotta e lampone. I buoni gradienti arancione e rosa usano quasi sempre tre punti nella stessa fascia di luminosità, invece di saltare dalla pesca pallida al rosa shocking.

- Crema: #fff7ed
- Pesca: #fed7aa
- Cipria: #fda4af
- Albicocca: #fb923c
- Corallo: #fb7185
- Mandarino: #f97316
- Rosa shocking: #ec4899
- Ruggine: #9a3412
- Terra bruciata: #431407

La gamma dall’arancione al rosa, con una crema e due marroni scuri per fondi e testi.

## Gradienti tenui pesca e cipria

Arancione e rosa chiari insieme ricordano la pelle, il lino e la luce del mattino presto. Per questo sono naturali per cura della pelle, matrimoni, benessere e panetterie. Fotografano bene anche dietro ai prodotti, perché valorizzano i toni caldi. Componi il testo in un rosso ruggine scuro invece che in nero: mantiene il calore.

- Lino pesca: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Albicocca e cipria: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Prima luce: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Arancione e rosa tenui. L’inchiostro ruggine o terra bruciata si legge bene su tutti e tre. [I gradienti pesca](https://gradiently.design/it/guide/peach-gradient) ne raccolgono altri della stessa famiglia.

## Gradienti corallo, pompelmo e anguria

Arancione e rosa saturi sono estate pura: succo di pompelmo, teli da mare, locandine di festival. Sono abbastanza forti da fermare lo scorrimento e abbastanza amichevoli da non risultare aggressivi. Tienili lontani dai testi molto piccoli e lascia loro un angolo di calma.

- Da mandarino a rosa: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Pompelmo: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Anguria: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Frullato di mango: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Gradienti arancione e rosa accesi. Ogni punto è vicino al successivo, così il centro resta vivido. [I gradienti corallo](https://gradiently.design/it/guide/coral-gradient) vanno più a fondo.

## Terracotta e rosa antico, tonalità terrose

Spegni entrambi i colori e la coppia diventa calma e radicata, la tavolozza di vasi d’argilla, fiori secchi e muri cotti dal sole. È la versione meno usata e spesso la più elegante. Sta bene con oliva, sabbia e crema, e si accompagna bene alle [palette di colori terrosi](https://gradiently.design/it/guide/earth-tone-colors).

- Argilla e rosa: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Crepuscolo terracotta: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Petali secchi: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Arancione e rosa spenti. Hanno un’aria fatta a mano e calma, e vanno bene per interni, ceramiche, fioristi e brand di slow living.

> **Dietro le foto di prodotto** Le miscele calde e smorzate valorizzano pelle, legno, pane e ceramica perché ne richiamano i colori. Scegli un punto dal prodotto stesso e costruisci il gradiente a partire da lì. [Gli sfondi per foto di prodotto](https://gradiently.design/it/guide/product-photo-backgrounds) mostrano come.

## Gradienti brace e lampone scuri

Parti da un fondo marrone profondo o prugna e lascia che arancione e rosa ne emergano come un bagliore: la coppia smette di essere allegra e diventa intima, come luce di candela, brace, una carta dei cocktail. Questi gradienti reggono facilmente un testo chiaro, e sono pratici per locandine di eventi e offerte serali.

- Brace: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Da ruggine a lampone: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Ultima luce: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Gradienti arancione e rosa scuri. Aggiungi grana, perché le miscele calde scure tendono a formare bande.

## Come evitare il cliché del tramonto

Da arancione a rosa su una diagonale a 45 gradi è ovunque, dagli sfondi dei telefoni alle icone delle app, quindi sembra un valore predefinito. Se vuoi il calore senza il preset, cambia almeno una delle cose qui sotto. [I gradienti tramonto](https://gradiently.design/it/guide/sunset-gradient) trattano la versione letterale, se è quella che cerchi.

### Preset

- Da arancione acceso a rosa acceso, due punti
- Diagonale netta a 45 gradi
- Colore distribuito in modo uniforme sul quadro
- Testo bianco sulla parte più luminosa

### Ragionato

- Prima un fondo: crema, argilla o brace
- Luce da un angolo con un gradiente radiale
- Punti irregolari, con un colore che guida
- Inchiostro ruggine sulle versioni tenui, crema su quelle scure

## Colori del testo su arancione e rosa

L’arancione è uno dei colori saturi più chiari, quindi il testo bianco su mandarino o albicocca è più debole di quanto sembri. Ruggine scuro o terra bruciata è l’inchiostro affidabile sulle versioni tenui e accese; la crema va bene su quelle scure. I rapporti usano la formula WCAG, in cui 4,5:1 è il minimo abituale per il testo corrente, e il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility) spiega il resto.

| Sfondo | Testo | Contrasto | Giudizio |
| --- | --- | --- | --- |
| Albicocca `#fb923c` | Bianco | 2,3:1 | Non passa |
| Mandarino `#f97316` | Bianco | 2,8:1 | Non passa per la maggior parte dei testi |
| Pesca `#fed7aa` | Terra bruciata `#431407` | 11,6:1 | Eccellente |
| Corallo `#fb7185` | Terra bruciata `#431407` | 5,8:1 | Buono |
| Arancione profondo `#c2410c` | Bianco | 5,2:1 | Buono |
| Lampone `#be185d` | Bianco | 6,0:1 | Buono |

Se il testo bianco è importante nel tuo design, scurisci i punti dietro di esso fino ad arancione profondo o lampone.

Una promozione verticale per un bar con lettere crema su un gradiente scuro che brilla di arancione e lampone

Una promozione per un bar su brace e lampone, con testo crema sul lato scuro.

Un post quadrato di cura della pelle con lettere marrone scuro su un gradiente tenue pesca e cipria

Un post di cura della pelle su pesca e cipria con inchiostro terra bruciata.

## CSS del gradiente arancione e rosa

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

Un fondo crema con una luce corallo in alto a destra e albicocca in basso a sinistra, e testo terra bruciata.

Sovrapporre due luci radiali tenui su una base pallida dà un calore molto più naturale di una sola diagonale. Se vuoi un calore che sia inconfondibilmente tuo, il Mercato di Gradiently ti permette di cercare i Mark con parole di colore come «corallo» o «pesca». Ogni Mark è unico e ha un solo proprietario alla volta, e quando lo riservi solo tu puoi esportare con lui.

## FAQ

### Qual è un buon codice per un gradiente arancione e rosa?

Un classico acceso è `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Per una versione più tenue prova `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### Arancione e rosa stanno bene insieme?

Sì. Sono vicini sul cerchio cromatico, con il corallo in mezzo, quindi si fondono in modo pulito e danno un’impressione calda.

### Che colore di testo va su un gradiente arancione e rosa?

Un ruggine scuro o una terra bruciata come `#431407` si legge bene sulle versioni tenui e accese. Il bianco funziona solo sui punti più profondi, come `#c2410c` o `#be185d`.

### Come faccio a far sembrare un gradiente arancione e rosa meno un tramonto?

Parti da un fondo come crema, argilla o una brace scura, illuminalo da un angolo invece che in diagonale e lascia che un colore guidi.

### Che colore c’è tra arancione e rosa?

Il corallo, intorno a `#fb7185`, con salmone e anguria come parenti stretti.