# Gradiente ciano: codici elettrici e nitidi

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

Il ciano è il colore degli schermi, delle piscine e del ghiaccio: pulito, brillante e un po’ futuristico. È anche molto più chiaro di come appare, e questo cambia il modo di metterci sopra le parole.

## The short version

- Un gradiente ciano fonde il colore brillante a metà strada tra verde e blu con bianco, blu, lime, magenta o un navy profondo.
- Il ciano puro da schermo è `#00ffff`, che il CSS chiama anche aqua, ed è più chiaro e brillante del verde acqua o del turchese.
- Il testo bianco sul ciano puro ha un contrasto di appena 1,3 a 1 circa, quindi il ciano richiede testo scuro o uno sfondo molto più profondo dietro le parole.
- Il ciano appare più elettrico su un fondo quasi nero o navy, dove una piccola quantità sembra brillare.
- Il ciano si fonde in modo pulito con blu e lime, perché sono entrambi suoi vicini sul cerchio dei colori.

Un **gradiente ciano** fonde il colore brillante a metà strada tra verde e blu con uno dei suoi vicini: bianco per il ghiaccio, blu per un look tech elettrico, lime per la freschezza, magenta per un tono cyber, o un navy profondo dove il ciano sembra brillare. Il ciano puro da schermo è `#00ffff`, ed è molto più chiaro di quanto si pensi, quindi la vera abilità sta nel decidere dove vanno le parole. Seguono codici da copiare per ogni look, con i numeri di contrasto che contano.

## Ciano, verde acqua e turchese non sono la stessa cosa

Questi tre vengono scambiati di continuo, e la differenza conta quando fai un brief a un designer o scegli un codice. Il CSS li nomina tutti e tre, e sono chiaramente distinti. Il ciano è il più brillante e il più equilibrato tra verde e blu. Il turchese è più morbido e un po’ più verde, come la pietra preziosa. Il verde acqua (teal) è molto più scuro e calmo.

| Colore | Nome CSS ed esadecimale | Carattere |
| --- | --- | --- |
| Ciano | `aqua` / `cyan`, `#00ffff` | Il più brillante, elettrico, sintetico |
| Ciano elettrico | `#00e5ff` | Ciano con un tocco di blu in più, più riposante per gli occhi |
| Turchese | `turquoise`, `#40e0d0` | Più morbido e più verde, tropicale |
| Verde acqua | `teal`, `#008080` | Scuro, calmo, adulto |

Quattro vicini. Se il tuo gradiente deve sembrare calmo e non brillante, probabilmente vuoi il verde acqua, non il ciano.

Per i parenti più calmi, vedi [gradiente verde acqua](https://gradiently.design/it/guide/teal-gradient) e [gradiente turchese](https://gradiently.design/it/guide/turquoise-gradient). Questo articolo resta sul lato brillante.

- Ghiaccio: #f0fdff
- Piscina chiara: #a5f3fc
- Ciano puro: #00ffff
- Ciano elettrico: #00e5ff
- Ciano profondo: #0891b2
- Laguna: #0e7490
- Navy notte: #082f49
- Accento lime: #b6f73a

Una famiglia di ciani dal ghiaccio al navy, più il lime come partner che lo mantiene fresco.

## Codici per gradienti ciano ghiaccio e piscina

L’estremo chiaro del ciano sa di acqua fredda e aria pulita. Il ghiaccio è quasi bianco con un accenno di colore; ghiacciaio e piscina scendono più in profondità, attraverso il ciano brillante fino a un blu verde che può reggere testo bianco in basso. Si adattano a offerte estive, cura della pelle con una storia rinfrescante, bevande e tutto ciò che vuole sembrare rinfrescante.

- Ghiaccio: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Ghiacciaio: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Piscina: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Ciani chiari. Metti testo scuro sulla parte alta di ciascuno; solo lo stop più profondo in basso, in ghiacciaio e piscina, regge il bianco.

## Ciano elettrico su sfondi scuri

Il ciano diventa elettrico quando sta sul buio. Una piccola luce ciano su un fondo quasi nero o navy sembra uno schermo, un laser o una visualizzazione di dati, ed è per questo che è ovunque nel software, nei giochi e nella scienza. Tieni scuro gran parte dell’inquadratura e lascia che il ciano occupi un angolo o un bordo. Il **gradiente ciano blu** di questa serie è il più versatile di tutti, brillante a un’estremità e saldamente blu all’altra.

- Da ciano a blu elettrico: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Luce ciano sul nero: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Notte di circuiti: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Fondi scuri con luce ciano. Notte di circuiti sale dal nero al ciano, perfetto per un hero in cui il titolo sta nella metà alta scura.

Per schemi completi costruiti su questo look, [palette di colori tech](https://gradiently.design/it/guide/tech-color-palettes) ne ha diversi, e i [gradienti neon](https://gradiently.design/it/guide/neon-gradients) lo spingono ancora più verso la vita notturna.

## Ciano con lime e con magenta

Dal ciano al lime si passa per la menta e il tono è sportivo, fresco e ottimista. Il ciano con il magenta è l’abbinamento cyberpunk: due dei tre primari di stampa, entrambi a pieno volume. Fallo passare per un indaco scuro nel mezzo e sembrerà una strada al neon di notte invece di un giocattolo per bambini. L’articolo sul [gradiente magenta](https://gradiently.design/it/guide/magenta-gradient) tratta l’altro lato di questo abbinamento.

- Da ciano a lime: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Due abbinamenti decisi. Entrambi sono rumorosi, quindi dai loro parole brevi e molto spazio.

## La trappola del contrasto: parole sul ciano

Il ciano è uno dei colori saturi più chiari che uno schermo possa mostrare. Il testo bianco sul `#00ffff` puro ha un contrasto di appena 1,3 a 1 circa, illeggibile, mentre il nero sullo stesso ciano arriva a circa 16,7 a 1. Il bianco comincia a funzionare quando il ciano si approfondisce fino a circa `#0e7490`, dove raggiunge più o meno 5,4 a 1. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) spiega i rapporti e gli obiettivi.

### Difficile da leggere

- Testo bianco su ciano brillante
- Testo ciano su una pagina bianca
- Testo piccolo nel centro luminoso di un gradiente
- Testo azzurro pallido sul ghiaccio

### Facile da leggere

- Testo navy o quasi nero su ciano brillante
- Testo ciano su una pagina navy o nera
- Testo piccolo solo sullo stop più profondo
- Testo bianco su laguna #0e7490 o più scuro

È il tipo di giudizio che Gradiently fa per te. Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark, e il Mark sposta la sua zona più calma e con miglior contrasto dietro le parole, così uno sfondo ciano brillante non lascia mai il testo bianco in difficoltà.

## Un bordo a gradiente ciano in CSS

Sulle interfacce scure il ciano funziona magnificamente come bordo invece che come riempimento. Un bordo a gradiente mantiene leggibile la scheda aggiungendo il tono elettrico. Usa due sfondi, uno ritagliato sul padding e uno sul bordo, quindi mantiene gli angoli arrotondati.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Una scheda scura con un bordo da ciano a blu. Sostituisci il secondo gradiente con ciano e lime per un tono più fresco.

Altre tecniche, compresi i bordi animati, sono in [bordo a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-border).

## Dove sta bene un gradiente ciano

Il ciano è una scelta naturale per lanci di software, strumenti per sviluppatori, giochi, costumi da bagno, bevande e tutto ciò che vuole sembrare veloce o freddo. Il giorno del lancio, tieni un solo look ciano tra il post di annuncio, l’anteprima del link e il banner del changelog, così le persone lo riconoscono in ogni feed. [Branding per startup SaaS](https://gradiently.design/it/guide/saas-startup-branding) mostra come costruire un’intera identità intorno a un colore brillante come questo.

Un ampio post social con sfondo navy scuro, una luce ciano brillante su un bordo e le parole Rilasci in pochi secondi in bianco

Un post di lancio per X a 1600×900. Testo bianco sul lato scuro, con la luce ciano lontana dalle parole.

## FAQ

### Qual è il codice esadecimale del ciano?

Il ciano puro da schermo è #00ffff, chiamato anche aqua in CSS. Un ciano elettrico leggermente più blu e più comodo è #00e5ff.

### Che differenza c’è tra ciano e verde acqua?

Il ciano è brillante e chiaro, a metà strada tra verde e blu. Il verde acqua (teal), #008080 in CSS, è un blu verde molto più scuro e calmo.

### Che colore di testo funziona su uno sfondo ciano?

Navy o quasi nero sul ciano brillante. Il bianco funziona solo su ciani profondi come #0e7490 o più scuri.

### Quali colori stanno bene con un gradiente ciano?

Blu e lime si fondono in modo pulito perché sono vicini del ciano. Il magenta crea un deciso abbinamento cyberpunk, e il navy o il nero fanno brillare il ciano.