# Gradiente corallo: codici vivaci tra il rosa e l’arancione

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

Il corallo sta esattamente dove il rosa diventa arancione, e ha il calore dell’uno e il fascino dell’altro. È vivace, amichevole e sorprendentemente difficile da usare per il testo. Ecco i codici e le soluzioni.

## The short version

- Un gradiente corallo fonde arancioni caldi rosati, di solito con un lato verso il rosa e l’altro verso il mandarino o la pesca.
- Il colore CSS denominato coral è #ff7f50, un arancione vivo con una virata corallo.
- Corallo e verde acqua sono quasi opposti, quindi una fusione diretta tra loro diventa grigia; usa il verde acqua come area separata o come accento.
- Il testo bianco non regge sul corallo vivo; usa un bordeaux o marrone profondo come #3b0d0c, oppure sposta il bianco su un corallo rosso scuro.
- Il corallo si adatta a campagne estive, cibo e bevande, bellezza, fitness e app amichevoli per il pubblico.

Un **gradiente corallo** fonde arancioni caldi e rosati, i colori in cui il rosa diventa arancione. Spingilo verso il rosa e sembra grazioso e fresco; spingilo verso il mandarino e sembra solare ed energico. Il corallo è allegro e molto visibile, il che lo rende un favorito per estate, cibo, bellezza e fitness. Le sue due trappole sono una striscia grigia quando incontra il verde acqua e il testo che sparisce. Entrambe sono facili da evitare una volta che le conosci.

## Corallo, salmone, pesca e anguria

Gli arancioni caldi rosati condividono molti nomi. Vale la pena distinguerli, perché la parola giusta aiuta a scegliere i punti giusti e a descrivere ciò che vuoi a un designer o al Designer in Gradiently.

| Colore | Hex tipico | Carattere |
| --- | --- | --- |
| Corallo | `#ff7f50` | Vivo e caldo, tendente all’arancione |
| Living coral | `#ff6f61` | Corallo più rosato e morbido |
| Salmone | `#fa8072` | Più pallido e rosato, leggermente polveroso |
| Pesca | `#ffcba4` | Molto più chiaro, più arancione, delicato |
| Anguria | `#fb7185` | Più rosato e freddo, giocoso |

Il corallo è il più vivo di questi. I suoi vicini sono punti utili in un gradiente corallo.

## Gradienti corallo vivaci

Questi sono il corallo al suo più vivace. Tengono l’attenzione anche in miniatura, ed è per questo che funzionano così bene per post di saldi, lanci, corsi di fitness e tutto ciò che vuoi far notare in un feed affollato.

- Corallo classico: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Punch tropicale: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Fiore corallo: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Tramonto corallo: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Cinque fusioni corallo vivaci. Ogni colore partner è un vicino stretto, quindi le fusioni restano sature.

Qualche modo di usarli: «Corallo classico» dietro una sola riga come «Apriamo a mezzogiorno» in una storia 1080×1920; «Punch tropicale» come copertina di un menu di drink estivi; «Tramonto corallo» che scende lungo un pin Pinterest a 1000×1500 per una guida di viaggio. Il corallo è forte, quindi lascia che riempia l’inquadratura e tieni semplice tutto il resto: un titolo, un dettaglio, molto spazio.

## Gradienti corallo dal rosa all’arancione

### Corallo tendente al rosa

Spingi il corallo verso il rosa e il rosa pallido e diventa più morbido e romantico, ideale per bellezza, fioristi, matrimoni e marchi lifestyle. Per il lato più rosato della famiglia, vedi i [gradienti rosa](https://gradiently.design/it/guide/pink-gradient).

- Corallo rosa: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Salmone cipria: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Corallo anguria: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

I coralli tendenti al rosa sono più morbidi e si adattano a marchi di bellezza e lifestyle.

### Corallo tendente all’arancione

Spingilo dall’altra parte, verso l’albicocca e il mandarino, e il corallo diventa più solare e più forte: menu estivi, bar di frullati, vacanze. I [gradienti arancione rosa](https://gradiently.design/it/guide/orange-pink-gradient) coprono l’intero spazio tra i due.

- Corallo albicocca: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Dal corallo al mandarino: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Bar sulla spiaggia: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

I coralli tendenti all’arancione sono più solari, più energici e fatti per l’estate.

## Corallo e verde acqua senza il centro grigio

Corallo e verde acqua sono uno dei grandi abbinamenti: caldo contro freddo, barriera corallina contro mare. Ma stanno quasi all’opposto sulla ruota dei colori, quindi una fusione diretta passa per un grigio spento al centro. La soluzione è tenerli separati. Usa il verde acqua come fondo con una luce corallo, il corallo come fondo con un accento verde acqua, oppure passa dall’uno all’altro attraverso tinte molto pallide. [Gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients) spiega perché il centro diventa grigio.

- Da evitare: centro grigio: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Sole corallo sul verde acqua: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Attraverso il bianco conchiglia: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

La prima fusione si ingrigisce al centro. Le altre due tengono corallo e verde acqua come colori separati, o li uniscono attraverso una tinta pallida.

Su un menu o un poster, prova un verde acqua molto scuro come `#042f2e` con titoli e pulsanti corallo. Il corallo lì arriva a circa 5,8 a 1, molto meglio del bianco sul corallo, e risulta deciso ed estivo. Il lato verde acqua è trattato nei [gradienti verde acqua](https://gradiently.design/it/guide/teal-gradient).

## Corallo su fondo scuro

Il corallo brilla splendidamente su prugna profondo, blu notte o quasi nero. Una sola luce corallo su un fondo scuro sembra un’insegna al neon o un tramonto sul mare, e si adatta a bar, musica, vita notturna ed eventi serali. Tieni la luce corallo lontana da dove stanno le parole, e scrivile in conchiglia pallido o bianco sull’area scura.

- Corallo sul vino: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Tramonto sulla baia: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Carbone e corallo: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Una luce corallo, molto buio. Il corallo sembra più brillante che su bianco.

## Testo su un gradiente corallo

Il corallo sembra abbastanza deciso per il testo bianco, ed è proprio per questo che tanti design corallo falliscono. Il bianco su `#ff7f50` misura circa 2,5 a 1, ben sotto il 4,5 a 1 richiesto per il testo corrente. Un marrone bordeaux profondo come `#3b0d0c` misura circa 6,7 a 1 sullo stesso corallo e mantiene il calore. Se vuoi il testo bianco, approfondisci il corallo fino a un rosso come `#e11d48`, dove il bianco arriva a circa 4,7 a 1. Il metodo è in [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility).

Un post di saldi di uno studio di pilates con testo chiaro che attraversa la parte più viva di un gradiente corallo

Parole chiare dritte sul corallo vivo sembrano decise ma si leggono male su un telefono alla luce del giorno.

Lo stesso post di pilates con testo nitido su un’area più calma e più profonda del gradiente corallo

Lo stesso post con una zona più calma e un colore del testo che le si adatta.

Un Mark di Gradiently fa questa regolazione da solo: sposta la sua regione più calma e con il miglior contrasto dietro le tue parole e Auto sceglie inchiostro chiaro o scuro per ogni riga dalla palette del Mark stesso. Niente riquadri né ombre portate.

## CSS di un gradiente corallo per un pulsante

Il corallo fa un invito all’azione amichevole. Tieni il gradiente abbastanza chiaro perché un’etichetta scura resti leggibile, e fai scorrere la sua posizione al passaggio del mouse invece di scambiare i colori. [Pulsanti con gradiente CSS](https://gradiently.design/it/guide/css-gradient-button) ha altri schemi.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

Una pillola corallo con testo bordeaux profondo. Il gradiente scorre al passaggio del mouse invece di cambiare colore.

## FAQ

### Qual è il codice hex del corallo?

Il colore CSS denominato `coral` è `#ff7f50`. Il Living Coral di Pantone viene spesso approssimato come `#ff6f61`.

### Quali colori stanno bene con un gradiente corallo?

Pesca, rosa, mandarino e oro si fondono bene con esso. Verde acqua scuro, blu notte e prugna sono ottimi partner se tenuti come aree separate.

### Perché il mio gradiente corallo e verde acqua sembra grigio?

Corallo e verde acqua stanno quasi opposti sulla ruota dei colori, quindi i colori tra i due perdono saturazione. Tienili separati, o uniscili attraverso una tinta pallida.

### Posso usare il testo bianco sul corallo?

Non sul corallo vivo, dove il bianco non supera il contrasto. Usa un bordeaux o un marrone profondo, oppure approfondisci il corallo fino a un rosso prima di usare il bianco.

### Che differenza c’è tra corallo e salmone?

Il salmone è più pallido, più rosato e un po’ più polveroso. Il corallo è più vivo, più saturo e tende di più all’arancione.