Gradiente blu: 20 palette dal ghiaccio alla mezzanotte

Un gradiente blu fonde sfumature di blu, spesso con un vicino verde acqua, ciano o viola. Può sembrare un cielo limpido, un oceano profondo, uno schermo di notte o il bilancio annuale di una banca, a seconda dei blu che scegli e di come li usi. Qui sotto trovi venti palette di gradienti blu con CSS da copiare, dalla più pallida alla più scura, seguite dai colori di testo che funzionano e da come evitare che il blu risulti banale.

Gradienti azzurri: ghiaccio e cielo

I gradienti di azzurro pallido sembrano aperti, puliti e silenziosi. Stanno bene con sanità, viaggi, benessere e pagine di prodotto che hanno bisogno di spazio. Usa sopra un inchiostro scuro e aggiungi un tocco di calore o di lilla, perché non sembrino freddi e clinici.

Gradienti blu oceano e verde acqua

Spingere il blu verso il verde gli dà vita. I gradienti oceano sembrano freschi e naturali, e aggirano le associazioni aziendali del blu puro. Stanno bene con brand di viaggi, cibo, sostenibilità e outdoor.

Gradienti blu vivace ed elettrico

I blu saturi sono energici e tecnici. Stanno bene con lanci, app, sport ed eventi. Sono anche i blu più comuni sul web, quindi traggono il massimo vantaggio da una forma inattesa o da un accento caldo.

Gradienti blu scuro e mezzanotte

I gradienti navy profondo e mezzanotte sembrano seri, premium e calmi. Sono ottimi fondi per il testo bianco e per gli accenti luminosi. Attenzione al banding, che si vede facilmente nei blu scuri e lenti; una grana sottile lo risolve. Vedi banding nei gradienti.

Quale gradiente blu per quale lavoro

Venti palette sono tante da scegliere. Parti dal compito che il design deve svolgere e dalle parole che deve portare, poi scegli nel gruppo corrispondente.

Cosa comunica il blu, e il problema della banalità

In gran parte del mondo il blu è associato a calma, affidabilità e profondità, in parte per via del cielo e dell’acqua. Per questo è così comune in banche, assicurazioni, sanità e tecnologia. È anche il motivo per cui un gradiente di blu medio raramente aiuta a farsi riconoscere: sembra la categoria, non l’azienda. La psicologia del colore spiega perché la convenzione taglia da entrambe le parti.

Il blu si fonde bene verso i suoi vicini: verde acqua, ciano, indaco e viola. Si fonde male verso i suoi opposti. Dal blu dritto all’arancione o al giallo si passa per un centro grigiastro, quindi tieni brevi gli accenti caldi o fai passare la sfumatura per il viola o il rosa. I colori complementari spiegano perché.

Il testo sui gradienti blu

La trappola è il centro della gamma dei blu: un fiordaliso brillante come #3b82f6 sembra abbastanza forte per il testo bianco, ma scende sotto 4,5:1. Su un gradiente, controlla il contrasto dove il blu è più chiaro dietro le tue parole. Il testo su un gradiente ha il metodo completo.

.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}

Esportare un gradiente blu come immagine per i social richiede un passaggio in più. Le piattaforme ricomprimono i caricamenti, e i blu scuri e lenti sono tra i primi colori a spezzarsi in bande visibili. Esporta alla dimensione consigliata dalla piattaforma, aggiungi una grana sottile prima di salvare e usa il PNG dove la piattaforma lo accetta. I gradienti con grana mostrano quanta grana basta.

Per i viola vicini al blu, vedi gradienti viola; per opzioni più verdi, vedi gradienti verdi.