Gradienti vivaci: codici saturi che non vibrano

Un gradiente vivace è brillante e saturo senza vibrare quando valgono due regole: ogni colore sta vicino al suo vicino sulla ruota dei colori e ogni passaggio cambia chiaramente di luminosità. Rompi la prima e il centro diventa fangoso; rompi la seconda, mettendo fianco a fianco tonalità opposte di pari luminosità, e il bordo sembra sfarfallare. I dodici codici qui sotto seguono entrambe le regole, quindi sono forti come lo è un poster, non come lo è un’emicrania.

Dodici codici per gradienti vivaci

Perché alcuni gradienti brillanti vibrano

Metti un rosso saturo direttamente contro un blu saturo di luminosità simile e il confine sembra tremolare, come se i due colori non riuscissero a decidere quale sta davanti. I designer la chiamano vibrazione cromatica. È più forte sui bordi netti, nelle linee sottili e nel testo colorato, ed è il motivo per cui il testo rosso su fondo blu stanca tanto da leggere. I colori in sé vanno bene; a causarla è la combinazione di tonalità opposta e pari luminosità, a contatto.

Ci sono due rimedi. Tieni i colori distanti con un passaggio più scuro o più chiaro in mezzo, come a destra, oppure scegli colori vicini invece di opposti. Colori complementari spiega quando gli opposti valgono la fatica.

Regole per creare il tuo gradiente vivace

Il fango è l’altro modo in cui i gradienti brillanti falliscono. Sfuma due opposti saturi in semplice sRGB e il colore a metà scivola verso il grigio, come spiegano gradienti fangosi e, a un livello più tecnico, interpolazione dei gradienti. La saturazione stessa è una manopola, non un interruttore; saturazione nel design mostra come regolarla.

Gradienti vivaci in CSS

I browser moderni possono sfumare in uno spazio colore percettivo aggiungendo in oklch al gradiente. Così il centro di una sfumatura ampia resta vivido quanto i suoi estremi. Dai prima ai browser più vecchi una versione in esadecimale.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Dove i gradienti vivaci funzionano meglio

Il colore vivace si guadagna l’attenzione, quindi spendilo dove l’attenzione è tutto il lavoro: un feed che scorre, una miniatura tra venti altre, un poster dall’altra parte della strada. Funziona meno dove la gente deve leggere a lungo, come documenti, dashboard e articoli lunghi, dove un campo saturo stanca l’occhio in poche righe. Lì, limita il gradiente vivace a un’intestazione o a un solo pulsante e lascia che una superficie calma regga il resto.

La stampa è l’unico posto dove aspettarsi uno shock. I colori più brillanti dello schermo, soprattutto blu elettrici, rosa acceso e verdi acidi, stanno fuori da ciò che gli inchiostri CMYK riescono a riprodurre e su carta tornano nettamente più spenti. RGB e CMYK spiega perché; scegli tu versioni un po' più profonde e ordina una prova prima della tiratura.

Le parole su un gradiente vivace

Gli sfondi saturi oscillano di luminosità da un capo all’altro, quindi un solo colore di testo che si legge all’estremo scuro può sparire a quello chiaro. Usa solo bianco o nero quasi pieno, metti il titolo dove il gradiente è più profondo o più pallido e controlla il contrasto nel punto peggiore, non nella media. Contrasto dei colori e accessibilità ha i numeri a cui puntare.

Qui un Mark di Gradiently aiuta con il colore acceso: sa dove sono le parole, approfondisce o alleggerisce il colore vicino alle lettere e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla propria palette. Un aspetto saturo resta leggibile a ogni dimensione senza un riquadro o un’ombra dietro il titolo. Per gli effetti neon, vedi gradienti neon; per l’estremo opposto della manopola, gradienti sottili.