# Sfumatura gialla: codici vivaci che non virano al verde

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

Il giallo è il colore che tradisce più spesso una sfumatura: un solo punto sbagliato e il sole diventa lime, o l’oro diventa cachi. Ecco perché succede e una serie di codici che restano caldi fino in fondo.

## The short version

- Una sfumatura gialla diventa verde quando sfuma verso ciano, verde acqua o blu, perché i colori tra il giallo e il blu passano per il verde.
- I gialli scuri scivolano verso l’oliva e il cachi: approfondisci il giallo con ambra, arancio o marrone, non con grigio o nero.
- Il giallo resta più solare quando gli altri punti sono caldi: crema, pesca, arancio, rosa od oro.
- Il testo bianco sul giallo quasi mai funziona: un quasi nero o un marrone profondo si legge molto meglio.
- Per unire giallo e blu in una sola sfumatura, metti bianco, rosa o viola tra i due, così il punto medio non cade mai sul verde.

Una **sfumatura gialla** appare luminosa e allegra quando ogni punto tende al caldo: crema, burro, limone, oro, arancio. Sbaglia in due modi prevedibili. Se sfuma verso il blu o il verde acqua, il centro diventa verde; se la scurisci col grigio, diventa oliva. Tieni la tinta sul lato caldo del giallo, approfondiscila con l’ambra invece che col nero, e resta sole da un capo all’altro. I codici qui sotto seguono questa regola.

## Perché le sfumature gialle diventano verdi o spente

Il giallo sta accanto al verde sulla ruota dei colori, molto più vicino di quanto si pensi. Per questo è fragile in tre situazioni.

- **Sfumare verso i colori freddi.** Tra il giallo e il ciano, il verde acqua o il blu, il browser deve passare per il verde. Una sfumatura da giallo solare a azzurro cielo si ritrova con una striscia lime o salvia nel mezzo.
- **Scurire con nero o grigio.** L’occhio legge un giallo scuro e poco saturo come oliva o cachi, non come «giallo scuro». Non esiste un giallo profondo che sembri ancora giallo.
- **Partire da un limone che già tende al verde.** I limoni acidi come `#e4f04a` sono freschi da soli, ma trascinano ogni punto vicino verso il lime.

### Vira al verde o all’oliva

- Giallo dritto in azzurro cielo o verde acqua
- Giallo scurito con grigio o nero
- Un limone freddo come punto più chiaro
- Da giallo a verde senza un punto caldo

### Resta solare

- Giallo verso crema, pesca, arancio o rosa
- Giallo approfondito con ambra e marrone
- Un giallo caldo come `#facc15` come punto più chiaro
- Bianco o rosa messi tra giallo e blu

Lo stesso problema del centro grigio colpisce tutti i colori opposti, e [le sfumature spente](https://gradiently.design/it/guide/muddy-gradients) lo trattano in generale. Il giallo lo mostra per primo, perché il verde è così vicino.

## Codici per sfumature gialle vivaci

Sono quelle squillanti: estate, banner dei saldi, marchi per bambini, festival, cartelli di avvertimento fatti con garbo. Ognuna abbina il giallo a un partner più caldo, così c’è movimento senza scivolare nel verde.

- Sorbetto al limone: `linear-gradient(135deg, #fef08a 0%, #facc15 100%)`
- Girasole: `linear-gradient(135deg, #fde047 0%, #f59e0b 100%)`
- Dal giallo al mandarino: `linear-gradient(120deg, #facc15 0%, #fb923c 100%)`
- Limonata rosa: `linear-gradient(135deg, #fde047 0%, #f472b6 100%)`
- Sole di mezzogiorno: `radial-gradient(circle at 30% 30%, #fffbeb 0%, #fde047 35%, #f59e0b 100%)`
- Ondata di caldo: `linear-gradient(180deg, #fef9c3 0%, #fde047 45%, #f97316 100%)`

Sei sfumature gialle vivaci. Ogni colore partner è più caldo del giallo, ed è questo a tenerle pulite.

Il giallo vivace stanca se ce n’è tanto, quindi usalo su post e banner più che su un intero sito. In una storia da 1080×1920, un giallo che sfuma verso l’arancio in basso dà all’occhio un punto d’appoggio e tiene la parte più luminosa vicino all’area del titolo, in alto.

## Sfumature giallo chiaro: burro e crema

I gialli pallidi si comportano come carta calda. Sono ottimi sfondi per menu, inviti, newsletter e tutto ciò che si legge a lungo, perché il testo scuro ci sta comodo. Tieni almeno un punto vicino al bianco, così il giallo si legge come luce e non come una velatura su tutto.

- Carta crema: `linear-gradient(180deg, #fffdf5 0%, #fef3c7 100%)`
- Burro: `linear-gradient(135deg, #fefce8 0%, #fde68a 100%)`
- Crema pasticcera e pesca: `linear-gradient(135deg, #fef9c3 0%, #fed7aa 100%)`
- Luce dalla finestra: `radial-gradient(circle at 70% 20%, #fef08a 0%, #fefce8 55%, #fffdf7 100%)`

Gialli morbidi per le letture lunghe e i marchi gentili. Stanno bene con testi antracite, marrone e verde scuro.

## Sfumature dorate e giallo scuro senza oliva

Per dare ricchezza al giallo, non scurirlo: spostalo. Porta i punti più profondi verso ambra, ocra e marrone, e il giallo diventa oro, miele e senape invece di cachi. Per le finiture metalliche in particolare, [le sfumature oro](https://gradiently.design/it/guide/gold-gradient-design) mostrano come simulare la lucentezza.

- Miele: `linear-gradient(135deg, #fde68a 0%, #d97706 55%, #78350f 100%)`
- Senape: `linear-gradient(160deg, #facc15 0%, #ca8a04 50%, #713f12 100%)`
- Oro satinato: `linear-gradient(135deg, #fef3c7 0%, #e9b949 40%, #a16207 75%, #fde68a 100%)`
- Oro su fondo scuro: `radial-gradient(circle at 75% 25%, #fde047 0%, #b45309 30%, #1c1208 75%)`

Ogni punto scuro si sposta verso ambra o marrone. Il risultato si legge come oro, non come oliva.

> **Attenzione al colore dell’ombra** Se in un design ombreggi un oggetto giallo con una sovrapposizione grigia o nera, sembrerà oliva. Ombreggia il giallo con un ambra o un marrone traslucido.

## Sfumature giallo e blu senza il centro verde

Giallo e blu sono un abbinamento classico, ma una sfumatura diretta tra i due produce una banda verde. Hai tre buone opzioni: inserire un punto chiaro in mezzo, far passare la sfumatura per rosa e viola, oppure tenere i due colori separati come aree invece che sfumati.

- Da evitare: centro lime: `linear-gradient(135deg, #facc15 0%, #60a5fa 100%)`
- Passando per la crema: `linear-gradient(135deg, #fde047 0%, #fffbeb 45%, #93c5fd 100%)`
- Passando per il rosa: `linear-gradient(135deg, #fde047 0%, #f9a8d4 45%, #818cf8 100%)`
- Luce gialla su blu notte: `radial-gradient(circle at 80% 20%, #facc15 0%, #1e3a8a 40%, #0b1437 100%)`

La prima sfumatura mostra il problema. Le altre tre uniscono giallo e blu senza mai passare per il verde.

Nel CSS moderno puoi anche chiedere al browser di fare il giro lungo della ruota dei colori. Interpolando in OKLCH con `longer hue`, il giallo arriva al blu passando per arancio, rosa e viola invece che per il verde. Supporto e sintassi sono nella guida [gradienti CSS in OKLCH](https://gradiently.design/it/guide/css-gradient-oklch).

```css
.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}
```

Il percorso lungo sulla ruota delle tinte evita il verde. Tieni il fallback scritto a mano per i browser senza interpolazione nello spazio colore.

## Il testo su una sfumatura gialla

Il giallo è il colore saturo più chiaro che esista, quindi il testo bianco ci scompare. Il bianco su `#facc15` misura circa 1,5 a 1, mentre un marrone profondo come `#422006` supera 9 a 1 sullo stesso giallo. Usa testo scuro quasi ovunque e lascia il bianco ai gialli più profondi. [Contrasto del colore e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) riporta le soglie.

| Sfondo | Testo bianco | Testo marrone #422006 |
| --- | --- | --- |
| Limone `#fde047` | Fallisce nettamente | Circa 11:1 |
| Girasole `#facc15` | Circa 1,5:1, fallisce | Circa 9,5:1 |
| Oro scuro `#ca8a04` | Circa 2,9:1, fallisce | Supera |
| Ocra `#a16207` | Circa 4,9:1, supera | Debole |
| Bronzo `#854d0e` | Circa 6,9:1, supera | Fallisce |

Misure su colore piatto. Su una sfumatura, controlla la parte più chiara dietro ogni riga di testo.

Un post per un’azienda agricola con titolo marrone scuro su uno sfondo sfumato giallo caldo e arancio

Testo scuro e caldo su un giallo solare. Si legge subito e mantiene l’atmosfera allegra.

In Gradiently, l’inchiostro automatico fa questa scelta al posto tuo: sceglie testo chiaro o scuro per ogni riga dalla palette del Mark, così un design giallo non richiede un controllo manuale del contrasto a ogni ridimensionamento. Se il giallo fa parte della tua identità, [il significato del colore giallo](https://gradiently.design/it/guide/yellow-color-meaning) spiega cosa comunica, e [le sfumature arancioni](https://gradiently.design/it/guide/orange-gradient) sono il suo vicino di casa naturale.

## FAQ

### Perché la mia sfumatura gialla sembra verde?

O sfuma verso un colore freddo come il blu o il verde acqua, o il giallo stesso tende al limone. Usa punti partner più caldi come arancio, rosa o crema.

### Come faccio una sfumatura giallo scuro che non sia oliva?

Approfondisci il giallo con ambra, ocra e marrone invece di grigio o nero. Diventa così oro o miele, non cachi.

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

Quasi nero, antracite o marrone profondo. Il testo bianco non supera il contrasto su quasi tutti i gialli vivaci.

### Come sfumo giallo e blu in un solo gradiente?

Metti crema, bianco o rosa tra i due, oppure interpola in OKLCH con `longer hue` così la sfumatura attraversa colori caldi invece del verde.

### Qual è un buon codice CSS per una sfumatura gialla?

`linear-gradient(135deg, #fde047 0%, #f59e0b 100%)` è un giallo caldo affidabile che non vira mai al verde.