Gradiente blu e viola: 20 codici che si fondono bene

Un gradiente blu e viola corre tra tinte vicine sulla ruota cromatica: blu #3b82f6, indaco #4f46e5, viola #7c3aed e i morbidi pervinca e lavanda intorno. Poiché le tinte stanno una accanto all’altra, la sfumatura resta pulita quasi automaticamente. La parte difficile è farne uno che non assomigli alle migliaia di icone di app e slide di conferenze che già ne usano uno. Qui sotto trovi venti codici in quattro atmosfere, i casi in cui la sfumatura diventa spenta e i colori del testo che si leggono su ciascuno.

Perché blu e viola si fondono così bene

Il viola è blu con un po’ di rosso dentro. Passa dall’uno all’altro e ogni passo intermedio è un colore vero e saturo: blu, indaco, viola. Confrontalo con la sfumatura da blu ad arancione, dove il punto a metà strada è un grigio piatto. I colori analoghi spiega il principio, e la ruota dei colori mostra dove sta ogni tinta.

Gradienti blu e viola scuri: notte e profondità

Parti dallo scuro e il gradiente sembra subito meno generico. Un fondo di mezzanotte con luce indaco e viola sa di cielo notturno, sala da concerto o app premium. Questi cinque portano benissimo il testo chiaro.

Gradienti blu e viola morbidi: pervinca e lavanda

Schiarisci la famiglia e diventa calma, sognante e un po’ nostalgica. Questi vanno bene per benessere, sonno, cartoleria e tutto ciò che punta a un’atmosfera dolce. Tieni l’inchiostro scuro; il bianco scompare sulla maggior parte. Ce ne sono altri nei gradienti pastello.

Gradienti blu e viola elettrici

Alza la saturazione e la coppia diventa rumorosa, sintetica e molto digitale. Questi vanno bene per giochi, musica, lanci tecnologici e tutto ciò che è notturno. Usali in fasce o bagliori più che su un intero poster, e abbinali a un quasi nero perché abbiano qualcosa contro cui brillare. I gradienti neon ha la tecnica completa.

Gradienti blu e viola con un terzo colore

Il modo più rapido per fare tuo un gradiente blu e viola è un colore in più usato con parsimonia. Il rosa lo porta verso il crepuscolo, il verde petrolio verso l’aurora, l’oro verso il lusso e la pesca verso un’alba morbida.

Quando un gradiente blu e viola diventa fangoso

Da blu a viola è sicuro. Due sfumature affini non lo sono. Il ciano nel rosa attraversa gran parte della ruota, e i blu spenti e grigiastri nei viola spenti danno un centro senza vita. In entrambi i casi la soluzione è la stessa: interpolare in OKLCH, che mantiene uniformi luminosità e saturazione lungo la sfumatura. I gradienti fangosi e l’interpolazione dei gradienti approfondiscono.

/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}

Come rendere un gradiente blu e viola meno generico

La diagonale da viola a blu è così familiare che la gente la legge come predefinita prima ancora di leggere ciò che ci hai scritto sopra. Non servono colori esotici per evitarlo. Bastano piccole decisioni deliberate, che si sommano.

• Scegli prima un fondo. Un fondo di mezzanotte o color carta dà l’atmosfera più del blu o del viola, e ti distingue subito dal predefinito vivace.
• Sposta la luce fuori dalla diagonale. Metti il viola più luminoso in un angolo con un gradiente radiale invece di farlo correre da bordo a bordo a 135 gradi.
• Usa punti irregolari. Lascia che l’indaco tenga il 60 per cento della superficie e il viola solo l’ultimo tratto. Terzi uguali sembrano fatti da una macchina.
• Aggiungi un accento in un solo punto. Un filo di rosa, verde petrolio o oro, come nella serie sopra, si ricorda molto più dei colori di base.
• Finisci con la grana. Uno strato di rumore fine nasconde il banding e trasforma una sfumatura da schermo in una superficie; i gradienti con grana ha il codice.
• Disegna ogni misura separatamente. La luce dovrebbe cadere in un punto sensato su una storia e su un banner, non dove la lascia un ritaglio.

Aiutano anche i nomi delle atmosfere. «Indaco di mezzanotte con un bordo dorato» è una decisione che puoi ripetere per un intero anno di post; «gradiente blu e viola» no.

Testo su un gradiente blu e viola

Quando le parole passano dall’estremo scuro a quello chiaro dello stesso gradiente, nessun inchiostro funziona dappertutto. Il testo su un gradiente tratta le opzioni. In Gradiently, l’inchiostro automatico se ne occupa riga per riga, scegliendo testo chiaro o scuro dalla palette del Mark, così uno sfondo blu e viola non inghiotte mai un titolo.