# Sfumatura teal: codici dalla laguna al mare profondo

[Canonical HTML page](https://gradiently.design/it/guide/teal-gradient)

Il teal sta esattamente tra blu e verde, il che lo rende calmo, intelligente e insolitamente facile da miscelare. Scendi dalla laguna al mare profondo con i codici per ogni profondità.

## The short version

- Una sfumatura teal miscela tonalità di blu verde, di solito da un acqua chiaro a un blu verde profondo.
- Il teal si miscela in modo pulito con i suoi vicini: ciano, smeraldo, blu e blu navy.
- Accenti caldi come corallo, pesca e rame stanno opposti al teal e lo fanno brillare se tenuti fuori dalla miscela.
- Il testo bianco richiede un teal almeno profondo come #0f766e per superare il contrasto; i teal più chiari vogliono testo scuro.
- Un teal molto scuro è un ottimo fondo per la modalità scura perché risulta più morbido del nero e meno scontato del blu navy.

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.

- Acque basse: #ccfbf1
- Laguna: #5eead4
- Acqua: #2dd4bf
- Teal: #14b8a6
- Barriera: #0d9488
- Alga: #0f766e
- Teal profondo: #115e59
- Abisso: #042f2e

Otto teal dal chiaro allo scuro. Due o tre vicini danno una miscela calma; dal chiaro allo scuro dà profondità.

## 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.

- Acque basse: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Laguna: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Dal cielo alla laguna: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Piscina al sole: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Teal chiari che restano freschi. Ognuno mantiene un punto quasi bianco, così il testo scuro ha un posto dove stare.

## 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.

- Barriera: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Giada: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Dal ciano all’alga: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Dal teal al blu: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Teal in tre passi: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

I teal medi tirano verso lo smeraldo o il blu. Scegli la direzione in base a come deve sentirsi il tuo brand.

## 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](https://gradiently.design/it/guide/gradient-banding).

- Discesa: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Luce dall’alto: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Dal teal profondo alla mezzanotte: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Raggio di luce: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Teal scuri con un’unica fonte di luce. Sembrano costosi e calmi.

## 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](https://gradiently.design/it/guide/complementary-colors) spiega l’attrazione, e [le sfumature corallo](https://gradiently.design/it/guide/coral-gradient) ha i codici per l’altro lato.

- Da evitare: centro grigio: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Sole di rame sul teal profondo: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Dal teal chiaro alla pesca: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

Una miscela da teal saturo a corallo diventa grigia al centro. Una piccola luce calda sul teal, o due tinte chiare, funziona molto meglio.

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.

| Se sei | Prova | Abbina a |
| --- | --- | --- |
| Una clinica, una piscina o un brand di cura della pelle | Acque basse o Laguna | Testo antracite, spazio bianco |
| Un’app o un prodotto fintech | Dal teal al blu | Un solo colore corallo per i pulsanti |
| Un caffè, un fioraio o un vivaio | Giada | Crema e terracotta |
| Un hotel, un bar o uno studio legale | Luce dall’alto | Dettagli in rame o ottone |
| Un evento serale | Raggio di luce | Titolo in laguna chiara |

Punti di partenza, non regole. Provali con il tuo titolo e il tuo logo reali.

## 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](https://gradiently.design/it/guide/dark-mode-design).

```css
: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); }
```

Una struttura in teal profondo con un bagliore teal in alto. I link in laguna chiara restano leggibili su di essa.

## 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.

| Sfondo | Testo bianco | Testo Abisso #042f2e |
| --- | --- | --- |
| Laguna `#5eead4` | Non supera | Circa 9,8:1 |
| Teal `#14b8a6` | Circa 2,5:1, non supera | Circa 5,8:1 |
| Barriera `#0d9488` | Circa 3,7:1, solo testo grande | Debole |
| Alga `#0f766e` | Circa 5,5:1, supera | Non supera |
| Teal profondo `#115e59` | Circa 7,6:1, supera | Non supera |

Il teal passa dal testo scuro al testo bianco tra Barriera e Alga.

Post verticale di una spa con testo bianco su una sfumatura teal profondo

Come post verticale, il titolo sta nel teal più calmo.

Lo stesso design della spa come storia alta con la luce teal spostata per adattarsi al formato

Lo stesso design come storia, ricreato da capo invece che ritagliato.

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](https://gradiently.design/it/guide/website-hero-background).

## FAQ

### Quali colori stanno bene con una sfumatura teal?

Ciano, smeraldo, blu e blu navy si miscelano con essa. Corallo, pesca, rame e oro fanno forti accenti caldi se usati fuori dalla miscela.

### Qual è il codice hex del teal?

Il colore con nome `teal` del web è `#008080`. La maggior parte delle palette moderne usa versioni più vivaci come `#14b8a6` per il teal medio e `#0f766e` per uno più profondo.

### Qual è la differenza tra teal e turchese?

Il teal è più profondo e più spento; il turchese è più chiaro, più brillante e tende un po’ di più al verde. Entrambi stanno tra blu e verde.

### Posso usare il testo bianco sul teal?

Solo sul teal profondo, da circa `#0f766e` in giù. I teal brillanti e chiari richiedono testo scuro per superare il contrasto.

### Il teal è un buon colore per la modalità scura?

Sì. Un teal molto scuro come `#042f2e` è più morbido del nero e più distintivo del blu navy, e gli accenti teal chiari si leggono bene su di esso.