Gradiente oceano: codici dalle acque basse agli abissi

Un gradiente oceano fonde blu e verdi bluastri nello stesso ordine del mare: acqua pallida sulla sabbia, turchese nelle acque basse, blu limpido in mare aperto e un blu notte quasi nero negli abissi. Fallo scorrere dall’alto in basso, dal chiaro allo scuro, e le persone lo leggono come profondità senza che nessuno glielo dica. I codici qui sotto seguono quell’immersione, poi aggiungono sfumature d’orizzonte, un mare in CSS a pagina intera e i colori del testo che mantengono leggibili le parole sull’acqua.

Perché l’oceano è blu e perché conta per il tuo gradiente

L’acqua assorbe prima l’estremo rosso della luce solare, poi il giallo e il verde, quindi più scendi più resta solo il blu, e poi anche quello svanisce. L’acqua bassa su sabbia chiara riflette molta luce e sembra turchese; l’acqua profonda sembra blu notte. Un gradiente oceano che rispetta quest’ordine sembra naturale; uno che mette il blu scuro sopra il turchese sembra capovolto, anche se nessuno sa dire perché.

Gradienti oceano delle acque basse

L’estremità luminosa: l’acqua che vedi da una spiaggia o da una barca col bel tempo. Soleggiati, puliti e invitanti, vanno bene per brand di vacanze, costumi da bagno, aziende di piscine e menu estivi. Il lato più tropicale è trattato in i gradienti turchesi.

Gradienti del mare aperto

Più al largo, il mare perde il verde e diventa di un blu limpido e sicuro. Queste sfumature sembrano affidabili, calme e capaci, ed è per questo che vanno bene per circoli velici, assicurazioni di viaggio, scienze marine e brand tecnologici che vogliono il blu senza la freddezza del blu notte aziendale. I gradienti blu ha la famiglia più ampia dei blu.

Gradienti dell’oceano profondo

In fondo all’immersione il mare diventa quasi nero con una sola traccia di blu. Sono drammatici e silenziosi insieme: scuole di immersione, documentari, orologi di lusso, ristoranti di pesce dopo il tramonto. Un tenue bagliore dall’alto, come luce dalla superficie, li salva dal sembrare vuoti. Le sfumature scure formano facilmente bande, quindi leggi le bande nei gradienti prima di esportare.

Gradienti d’orizzonte e di costa

I design a tema oceano spesso includono il cielo o la spiaggia. Il trucco per un orizzonte è un punto netto: due punti colore nella stessa posizione, così il cielo finisce e il mare inizia su una linea pulita. Una costa funziona al contrario, sfumando il mare nella sabbia attraverso un punto di schiuma pallida, così i colori caldi e freddi non si incontrano mai come grigio. I punti colore del gradiente spiega come funzionano le posizioni dei punti.

Scegliere la direzione per ogni formato

Poiché un gradiente oceano significa profondità, funziona meglio in verticale, e i formati alti mostrano l’intera immersione. Nei formati larghi, una sfumatura d’orizzonte o un bagliore radiale di solito funziona meglio che comprimere tutto il mare in poca altezza. Un post verticale sta nel mezzo: una morbida sfumatura verticale dal mare aperto al profondo funziona, purché il titolo cada in una sola fascia e non attraversi il cambio.

Qui una sola immagine ritagliata ti delude: la luce finisce nel posto sbagliato in metà dei tuoi formati. Un Mark di Gradiently invece si rende da capo in ogni formato, e il Designer può produrre la storia, il post e il banner da un solo brief, così il mare sta nel posto giusto in ciascuno.

Un gradiente oceano in CSS per una pagina intera

Una pagina lunga può diventare un’immersione: luminosa in alto, profonda nel footer. Applica il gradiente all’intera altezza del documento anziché alla finestra, dagli un ripiego a tinta unita e aggiungi un morbido bagliore di superficie in cima. I gradienti lineari CSS tratta la sintassi.

html {
  background-color: #082f49; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  color: #082f49;
  background-image:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}

/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }

Il testo su un gradiente oceano

Una sfumatura oceano passa da molto chiara a molto scura, quindi nessun colore di testo funziona su tutta la sua estensione. Il blu notte #082f49 sull’azzurro cielo pallido #7dd3fc misura circa 8,3 a 1. Il bianco sull’onda lunga #075985 misura circa 7,6 a 1, e sul mare aperto #0284c7 scende a circa 4,1 a 1, va bene per titoli grandi ma non basta per il testo del corpo. Metti le parole dove il colore le favorisce, e vedi il testo sui gradienti per altre tecniche.