Sfumatura gialla: codici vivaci che non virano al 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.

Lo stesso problema del centro grigio colpisce tutti i colori opposti, e le sfumature spente 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.

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.

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 mostrano come simulare la lucentezza.

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.

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.

.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 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à riporta le soglie.

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 spiega cosa comunica, e le sfumature arancioni sono il suo vicino di casa naturale.