# Sfumatura blu navy: codici scuri e affidabili

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

Il navy è il colore delle divise, delle banche e dei bei completi, ed è proprio per questo che può somigliare a quello di ogni altra banca. Questi codici ne tengono la fiducia e perdono la noia.

## The short version

- Una sfumatura blu navy mescola blu molto scuri, di solito da un navy quasi nero a un blu reale o indaco più luminoso.
- Il navy comunica serietà, affidabilità e solidità, ed è per questo che finanza, diritto e istruzione lo usano così spesso.
- Per evitare che il navy sembri generico, aggiungi una fonte di luce, inclinalo leggermente verso il viola o il verde acqua, o abbinalo a un accento metallico caldo come oro o rame.
- Il testo bianco e grigio chiaro si legge facilmente sul navy; funziona anche il testo oro se è abbastanza chiaro.
- Le sfumature navy scure fanno facilmente banding nelle immagini compresse, quindi aggiungi una grana leggera ed esporta a piena dimensione.

Una **sfumatura blu navy** mescola blu profondi, in genere da un navy quasi nero come `#0b1630` fino a un blu reale o indaco più luminoso. Appare calma, seria e affidabile, e fa sembrare nitido il testo bianco. Il problema è che il navy è ovunque nella finanza, nel diritto e nel design aziendale, quindi una dissolvenza navy piatta sembra spesso un'impostazione predefinita. I codici qui sotto danno al navy luce, temperatura e un accento, così mantiene la fiducia e acquista personalità.

## Codici classici per sfumature blu navy

Questi sono i più affidabili, vicini al navy puro, con solo il movimento sufficiente a evitare l'aspetto di un riempimento pieno. Sono ideali per slide di presentazione, bilanci annuali, intestazioni di email e piè di pagina di siti web.

- Navy classico: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Navy inchiostro: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Divisa: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Gessato: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Banda illuminata: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Cinque miscele quasi navy. Sottili di proposito: reggono testo, loghi e grafici senza fare concorrenza.

| Nome | Hex | Da usare come |
| --- | --- | --- |
| Navy (nome CSS) | `#000080` | Solo riferimento; appare duro sugli schermi |
| Mezzanotte | `#0b1630` | Il punto più scuro, quasi nero |
| Navy profondo | `#172554` | Un fondo per il testo bianco |
| Navy reale | `#1e3a8a` | L'estremo chiaro di una miscela classica |
| Blu reale | `#1e40af` | Uno slancio o un'illuminazione |

Codici hex del navy che si miscelano bene. Il navy con nome CSS è molto saturo; le versioni più morbide appaiono più raffinate.

## Sfumature navy con un tocco di colore

Inclina il navy di qualche grado verso il viola e diventa sera e lusso; inclinalo verso il verde acqua e diventa mare e tecnologia. Entrambi gli spostamenti lo fanno sembrare scelto. L'estremo più luminoso dovrebbe comunque restare abbastanza profondo da reggere il testo bianco sulla maggior parte dell'area.

- Da navy a indaco: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Viola reale: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Navy e verde acqua: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elettrico e navy: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Navy con un'inclinazione. Indaco e viola sanno di premium, il verde acqua di fresco, un angolo di blu acceso di tecnico.

## Navy e oro, rame o argento

Pochi fondi accolgono un accento metallico meglio del navy. L'oro sul navy è tradizionale e celebrativo; il rame è più caldo e moderno; l'argento è freddo e discreto. Tieni il metallo piccolo, come una luce in un angolo o un filetto sottile, così il navy continua a fare la maggior parte del lavoro. [Sfumature oro](https://gradiently.design/it/guide/gold-gradient-design) e [sfumature argento](https://gradiently.design/it/guide/silver-gradient) mostrano nel dettaglio il lato metallico.

- Luce oro sul navy: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Angolo rame: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Bordo argento: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Il metallo tenuto piccolo e in un solo punto. L'occhio va prima lì, poi alle tue parole.

- Mezzanotte: #0b1630
- Navy profondo: #172554
- Navy reale: #1e3a8a
- Oro antico: #d4a64a
- Avorio: #f8f6f1
- Ardesia: #94a3b8

Un sistema navy e oro: tre navy, un accento oro, avorio per il testo e ardesia per i dettagli secondari.

## Sfumature navy notte per atmosfere notturne e di lusso

Le miscele radiali sembrano un cielo dopo il tramonto o una stanza in penombra. Si adattano a inviti per gala, bar di hotel, gioielli, orologi e radio notturne. Per la versione stellata, vedi [sfumature cielo notturno](https://gradiently.design/it/guide/night-sky-gradient).

- Dopo il tramonto: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Sala di velluto: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Bagliore di città: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Navy con un'unica luce morbida. Il punto più scuro è vicino al nero, ma il blu gli impedisce di sembrare vuoto.

## Dove le sfumature navy si guadagnano il posto

Il navy dà il meglio dove contano più le parole dell'immagine, perché offre al testo un fondo calmo e ad alto contrasto. Alcuni usi da rubare:

- **Slide a 1920×1080:** «Navy classico» per i separatori di sezione, con un filetto oro sotto ogni titolo.
- **Banner del profilo LinkedIn a 1584×396:** «Navy e verde acqua» da sinistra a destra, più scuro dietro la tua foto.
- **Intestazione email a 1200×600:** «Navy inchiostro» con un titolo avorio, così l'intestazione si sente già a casa nelle caselle in modalità scura.
- **Inviti per lauree e premiazioni:** «Luce oro sul navy» stampato come volantino A5.
- **Grafici e dashboard:** un fondo navy profondo rende facili da distinguere i colori vivaci dei dati.

## Come far sembrare il navy meno aziendale

### Sembra quello di ogni banca

- `#000080` piatto con un logo bianco
- Una dissolvenza dritta dall'alto in basso
- Pulsanti di un blu medio acceso
- Foto stock di una stretta di mano

### Sembra curato

- Un navy addolcito con un'inclinazione al viola o al verde acqua
- Luce che arriva da un solo punto
- Un accento caldo: oro, rame o corallo
- Una grana fine che lo fa sembrare stampato

Nessuna di queste scelte costa fiducia. Rendono solo il brand riconoscibile a colpo d'occhio, cosa che conta quando ogni concorrente usa lo stesso blu. [Asset di brand distintivi](https://gradiently.design/it/guide/distinctive-brand-assets) spiega perché il riconoscimento nasce dal possedere qualcosa che nessun altro usa. Un test utile: copri il logo e chiediti se qualcuno capirebbe comunque che il design è tuo. Con una dissolvenza navy piatta, la risposta è quasi sempre no.

Un'immagine di link LinkedIn di uno studio di pianificazione finanziaria con testo bianco su una sfumatura navy illuminata da un angolo

Un'immagine di link per LinkedIn su un navy profondo con un'unica luce calda. Seria, non anonima.

Lo stesso design di pianificazione finanziaria come post verticale sulla sfumatura navy

Lo stesso design come post verticale, con la luce spostata per adattarsi al formato più alto.

## CSS per sfumature navy senza banding

Le miscele scure e sottili sono il punto in cui il banding si vede di più: si notano scalini visibili invece di una dissolvenza liscia, soprattutto dopo che una piattaforma ricomprime l'immagine. Sul web, qualche punto in più e uno strato di grana lo nascondono. [Banding nelle sfumature](https://gradiently.design/it/guide/gradient-banding) ne spiega la causa.

```css
.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}
```

Punti intermedi in più ammorbidiscono la dissolvenza, una tenue luce oro aggiunge calore e uno strato di grana nasconde gli scalini rimasti.

Il testo è la parte facile con il navy. Bianco e avorio superano comodamente il contrasto su tutti i navy qui sopra, e l'oro antico `#d4a64a` si legge a circa 8 a 1 su mezzanotte, quindi funziona per i titoli. Da tenere d'occhio è il blu acceso: un blu medio come `#3b82f6` dietro un testo bianco scende a circa 3,7 a 1. In Gradiently, l'Inchiostro automatico se ne occupa riga per riga, scegliendo il testo dalla palette del Mark stesso, e il [Designer](https://gradiently.design/it/guide/what-is-gradiently) può impaginare un'intera campagna navy con la voce del tuo brand kit.

## FAQ

### Qual è il codice hex del blu navy?

Il colore CSS con nome `navy` è `#000080`. Versioni più morbide come `#172554` o `#0b1630` di solito rendono meglio sugli schermi.

### Quali colori stanno bene con una sfumatura blu navy?

Oro, rame, avorio, ardesia e corallo. Un solo accento caldo evita che il navy sembri freddo o aziendale.

### Il blu navy va bene per il brand di un'azienda?

Comunica serietà e affidabilità, quindi si adatta a finanza, diritto e istruzione. Poiché lo usano in tanti, aggiungi luce o un accento per restare riconoscibile.

### Perché la mia sfumatura navy mostra delle strisce?

Si chiama banding ed è comune nelle dissolvenze scure e sottili. Aggiungi più punti, uno strato di grana leggera ed evita una forte compressione JPEG.

### Posso usare il testo oro sul navy?

Sì, se l'oro è abbastanza chiaro. `#d4a64a` su `#0b1630` misura circa 8 a 1, quindi va bene per titoli e testo del corpo.