Sfumatura teal: codici dalla laguna al mare profondo

Una sfumatura teal corre tra tonalità di blu verde: acqua chiaro all’estremità luminosa, un teal medio nitido al centro e un blu verde scuro e inchiostrato in basso. Dato che il teal sta a metà tra blu e verde, si miscela facilmente verso entrambi i lati e quasi mai diventa spento. I codici qui sotto lo seguono per profondità, da una laguna soleggiata al mare profondo, con note su accenti, CSS e testo per ciascuno.

Una scala di teal per costruire qualsiasi sfumatura

La maggior parte delle buone sfumature teal è fatta di due-quattro passi di questa scala. Scegli i vicini per una miscela dolce, o salta tre gradini per il dramma. I nomi qui sotto vengono usati nel resto dell’articolo.

Sfumature teal chiare: laguna e acque basse

Il teal chiaro è pulito, fresco e discretamente allegro. Va bene per il benessere, le piscine e i costumi, le cliniche dentistiche e sanitarie, e per qualsiasi prodotto che voglia sembrare igienico senza la freddezza del blu puro. Portalo verso il bianco o verso una menta chiara per tenerlo morbido.

Sfumature teal medie: barriera e giada

Il centro della gamma è il teal al suo più sicuro. Funzionano bene per app, dashboard fintech, brand di sostenibilità e formazione, perché si leggono insieme come affidabili (blu) e vivi (verde). Inclinare verso lo smeraldo lo rende naturale; inclinare verso il blu lo rende tecnico.

Sfumature teal scure: il mare profondo

All’estremità scura, il teal diventa quasi nero con un respiro verde freddo. È il teal più sofisticato: studi legali, distillati, hotel, architettura, eventi serali. È anche un fondo superbo per un solo accento luminoso, perché nulla in esso fa concorrenza. Le miscele scure formano bande nelle esportazioni compresse, quindi un po’ di grana aiuta; vedi le bande nelle sfumature.

Accenti caldi per una sfumatura teal

L’opposto del teal sul cerchio cromatico è un rosso arancio caldo, quindi corallo, pesca, albicocca e rame lo fanno cantare. Tieni il colore caldo fuori dalla miscela stessa: una sfumatura da teal a corallo passa per un grigio spento al centro. Usa invece l’accento per un pulsante, un titolo o una piccola forma. I colori complementari spiega l’attrazione, e le sfumature corallo ha i codici per l’altro lato.

Nota il terzo campione: tinte molto chiare di opposti si miscelano bene, perché c’è poca saturazione da perdere. È un trucco utile per confezioni delicate e partecipazioni di nozze.

Scegliere una sfumatura teal per il tuo brand

Il teal è popolare tra i brand di salute, denaro e sostenibilità, quindi la sola tonalità non ti distinguerà. Lo fa la profondità che scegli, l’accento con cui lo abbini e la superficie. Parti dal lavoro che il design deve fare.

CSS di una sfumatura teal per un’interfaccia in modalità scura

Il teal profondo è una bella alternativa al nero o al blu navy per un’interfaccia scura. Appare più morbido del nero puro e dà comunque al testo chiaro un ampio contrasto. Ecco uno sfondo per la struttura di un’app con un tenue bagliore dietro la parte alta della pagina. Più sull’approccio in il design della modalità scura.

:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }

Testo leggibile sul teal

Il teal medio inganna. #14b8a6 sembra abbastanza forte per il testo bianco ma misura circa 2,5 a 1, una bocciatura netta. Il bianco richiede Alga (#0f766e, circa 5,5 a 1) o più scuro. Su qualsiasi cosa da Acqua in su, usa il colore Abisso #042f2e come inchiostro: mantiene il testo nella famiglia del teal e si legge facilmente.

Quest’ultimo punto conta più di quanto sembri. Una sfumatura ritagliata da un post a una storia sposta la luce nel posto sbagliato. In Gradiently un Mark viene reso a ogni misura, e il Designer può creare per te le altre misure, così un look teal resta equilibrato nel feed, nella storia e nell’hero del sito.