Gradienti verde e blu: codici freschi dall’effetto naturale

Un gradiente verde e blu fonde due vicini freddi: verdi come smeraldo #10b981 o menta #a7f3d0 e blu come #0284c7 o cielo #bae6fd, con petrolio e acqua a fare da ponte. La fusione resta pulita perché tra le due tonalità non c’è un punto grigio. Appare naturale perché lo vedi da sempre in acqua, ghiaccio e cielo. I codici qui seguono quattro paesaggi, con i colori del testo che si leggono su ciascuno e il CSS per tema chiaro e scuro.

Perché verde e blu stanno bene insieme

Verde e blu sono colori analoghi: stanno uno accanto all’altro sulla ruota, quindi ogni passaggio tra loro è un colore vero, soprattutto petrolio e acqua. La natura mostra di continuo questo accostamento, dai mari bassi dove l’acqua blu scorre su alghe verdi e sabbia, ai laghi glaciali e alle foreste di pini riflesse nell’acqua ferma. Prendere spunto da quelle scene è il modo più facile per rendere il gradiente calmo invece che aziendale.

Laguna: gradienti acqua e verde brillanti

L’acqua tropicale bassa è quasi tutta acqua con verde dove è più bassa e blu dove si approfondisce. Questi gradienti hanno una luminosità da vacanza. Aggiungi un punto sabbia calda se vuoi che sembrino una spiaggia e non una piscina.

Lago tra i pini: gradienti verde e blu scuri

Il verde scuro che sfuma nel blu scuro è silenzioso, elegante e affidabile. Pensa a un lago di bosco al tramonto o al colore di una vecchia bottiglia. Reggono bene il testo bianco e si adattano a finanza, attrezzatura outdoor, architettura e a qualsiasi marchio voglia sentirsi saldo.

Ghiacciaio: gradienti menta pallido e azzurro

Schiarisci la coppia fino in cima e ottieni ghiaccio glaciale e mattine fredde: pulito, arioso e molto calmo. Si adattano a sanità, cura della pelle, pulizie e app di produttività. Possono sembrare cliniche, quindi un tocco di bianco caldo aiuta.

Aurora: verde e blu su un cielo notturno

L’aurora boreale è luce verde e blu sul nero, per questo i gradienti aurora sono tra gli sfondi scuri più amati. Tieni il colore in bande morbide e lascia che il fondo scuro occupi gran parte del fotogramma. I gradienti aurora tratta la tecnica completa.

Colori del testo sui gradienti verde e blu

Smeraldo e acqua sono sorprendentemente chiari, quindi il testo bianco sulle versioni accese spesso non funziona. L’inchiostro verde petrolio scuro funziona sulle fusioni chiare e tiene tutto nella stessa famiglia; bianco e menta si leggono bene sulle scure. I rapporti qui sotto usano la formula WCAG. Il testo su un gradiente mostra cosa fare quando una riga attraversa entrambi gli estremi.

Come scaldare una palette verde e blu

Verde e blu sono entrambi freddi, quindi un intero brand in questi colori può sembrare distante. Un solo accento caldo risolve. Sabbia, corallo e oro tenue stanno tutti dall’altra parte della ruota rispetto al petrolio: usali accanto al gradiente, in un pulsante, in un logo o in una striscia su un bordo, invece di fonderli. I colori complementari spiega perché fondere attraverso la ruota dà il grigio.

CSS del gradiente verde e blu per tema chiaro e scuro

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Abbinare una versione chiara e una scura dello stesso verde e blu è un modo elegante per far sembrare il cambio di tema progettato e non invertito. I gradienti per il tema scuro approfondisce. In Gradiently un Mark si adatta a ogni formato che progetti e sceglie inchiostro chiaro o scuro riga per riga dalla sua palette, così sia i toni brillanti della laguna sia quelli scuri del pino mantengono leggibili le parole.