# Palette di colori scuri: codici cupi che restano leggibili

[Canonical HTML page](https://gradiently.design/it/guide/dark-color-palettes)

Le palette scure sembrano costose quando sono fatte di quasi neri con una traccia di colore, ed economiche quando sono nero puro con neon. Ecco sei palette fatte bene, con ogni codice.

## The short version

- Una buona palette di colori scuri si costruisce su un quasi nero con una leggera tinta di colore invece del nero puro #000000.
- Il testo su una palette scura si legge meglio in un bianco sporco tenue, che mantiene un forte contrasto senza l’abbaglio del bianco puro.
- Gli accenti sui fondi scuri devono essere più chiari e meno saturi di quanto sarebbero sul bianco, perché i colori vivaci vibrano contro il nero.
- Le interfacce scure mostrano la profondità rendendo leggermente più chiare le superfici in rilievo, non aggiungendo ombre.
- Ogni colore di testo in una palette scura deve comunque superare un controllo di contrasto rispetto alla superficie su cui sta davvero.

Una **palette di colori scuri** che resta leggibile ha tre parti: un fondo quasi nero con un accenno di colore, un bianco sporco tenue per il testo e uno o due accenti più chiari e calmi di quelli che useresti sul bianco. Il nero puro con neon saturi sembra duro e stanca gli occhi. Gli scuri tinti con luci delicate sembrano voluti e costosi. Le sei palette qui sotto seguono questa ricetta, con codici esadecimali da copiare e rapporti di contrasto già verificati.

## Sei palette di colori scuri con codici esadecimali

Ogni palette ha gli stessi cinque ruoli, da sinistra a destra: **fondo** (la pagina), **superficie** (schede e pannelli, un gradino più chiara), **profondo** (un colore intermedio ricco per forme e aree ampie), **accento** (per link, pulsanti ed evidenziazioni) e **testo**.

### Inchiostro di mezzanotte

- Fondo #0b0f1a: #0b0f1a
- Superficie #151b2c: #151b2c
- Blu profondo #2b3a67: #2b3a67
- Pervinca #8fa3d9: #8fa3d9
- Testo #e8e6f0: #e8e6f0

Fredda, calma e tecnica. Il testo sul fondo ha 15,5:1; l’accento pervinca ha 7,7:1, abbastanza per link ed etichette piccole.

### Notte nel bosco

- Fondo #0c1410: #0c1410
- Superficie #15231c: #15231c
- Pino profondo #2f5d46: #2f5d46
- Salvia #9cc5a1: #9cc5a1
- Testo #ece7da: #ece7da

Naturale e silenziosa, adatta a brand di benessere, outdoor e cibo. Testo 15,1:1, salvia 9,7:1.

### Rosso sangue di bue e rame

- Fondo #140a0b: #140a0b
- Superficie #241214: #241214
- Rosso sangue di bue #6b1e26: #6b1e26
- Rame #c9855b: #c9855b
- Testo #f1e6dc: #f1e6dc

Calda e ricca, a suo agio su carte dei vini, teatro ed eventi serali. Testo 15,9:1, rame 6,5:1.

### Melanzana

- Fondo #120b17: #120b17
- Superficie #1e1326: #1e1326
- Prugna #4a2a63: #4a2a63
- Orchidea #c79ad8: #c79ad8
- Testo #f3ecf6: #f3ecf6

Creativa e notturna, un’alternativa più morbida al viola neon. Testo 16,7:1, orchidea 8,3:1.

### Carbone e brace

- Fondo #121212: #121212
- Superficie #1e1e1e: #1e1e1e
- Grafite #3a3a3a: #3a3a3a
- Brace #ff8a3d: #ff8a3d
- Testo #ededed: #ededed

Grigi neutri con un accento caldo, il classico per app e dashboard. Testo 16:1, brace 8:1.

### Verde acqua profondo

- Fondo #071a1c: #071a1c
- Superficie #0f2a2d: #0f2a2d
- Verde acqua profondo #1f5c5f: #1f5c5f
- Acqua #66c2b8: #66c2b8
- Testo #e6f2ef: #e6f2ef

Oceanica e composta, adatta a finanza e salute. Testo 15,6:1, acqua 8,5:1.

I colori profondi di ogni palette sono per le aree, non per le parole: il navy sul fondo mezzanotte, per esempio, fa solo 1,7:1 circa. Usali per forme, illustrazioni e sfondi dietro un testo nei colori più chiari.

## Le stesse palette come gradienti scuri

Le palette scure si animano quando il colore profondo emerge dal fondo come luce in una stanza in penombra. Questi usano solo i codici qui sopra, quindi corrispondono esattamente alle palette piatte. Altre tecniche sono in [sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) e [gradienti cupi](https://gradiently.design/it/guide/moody-gradients).

- Inchiostro di mezzanotte: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Notte nel bosco: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Rosso sangue di bue: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Melanzana: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Carbone e brace: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Verde acqua profondo: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

I gradienti scuri creano più bande di qualsiasi altro tipo. Aggiungi un po’ di grana ed evita una forte compressione JPEG quando esporti.

## Regole per palette scure che si leggono

### Da evitare

- Il #000000 puro come fondo
- Il #ffffff puro per lunghi passaggi di testo
- Accenti completamente saturi, che sembrano vibrare
- Ombre portate per mostrare quale scheda sta sopra
- Caratteri sottili e leggeri a piccole dimensioni

### Da fare

- Un quasi nero tinto verso la tonalità del tuo brand
- Un bianco sporco tinto allo stesso modo
- Versioni più chiare e morbide dei colori di accento
- Superfici più chiare per gli elementi in rilievo
- Pesi regular o medium, spaziatura un po’ più larga

**Perché non il nero puro?** Il nero con testo bianco puro è il massimo contrasto che uno schermo può mostrare, 21:1, e sui display luminosi può risultare abbagliante, soprattutto nei passaggi lunghi. Un quasi nero tinto intorno a 15:1 è ancora molto sopra ogni soglia di accessibilità e molto più facile da leggere a lungo. Dà anche alla palette una temperatura, cosa che il nero puro non ha mai.

**Perché accenti più calmi?** Un blu o un rosso saturo che sul bianco va bene sul nero sembra brillare e tremolare ai bordi. Alza la sua luminosità e abbassa un poco la saturazione, come con la pervinca e la salvia sopra, e sta fermo. Controlla ogni accento che usi per il testo con un [verificatore di contrasto](https://gradiently.design/it/guide/color-contrast-accessibility).

## Come ricavare una palette scura dal colore del tuo brand

Non devi prendere in prestito una delle palette qui sopra. Qualsiasi colore di brand può diventare una palette scura mantenendo la tonalità e cambiando solo luminosità e saturazione. Funziona meglio in un formato che separa le due cose, come l’[HSL](https://gradiently.design/it/guide/hsl-colors). Qui un colore di brand corallo, `#e0525d`, diventa un set scuro completo.

1. **Fondo: stessa tonalità, quasi nessuna luce** Mantieni la tonalità, porta la saturazione a circa il 30% e la luminosità a circa il 7%: `#170c0d`. Si legge come nero ma sembra caldo.
2. **Superficie: un gradino su** Alza la luminosità a circa il 12% e abbassa un po’ la saturazione: `#261718`. Schede e pannelli stanno qui.
3. **Profondo: un tono medio ricco per le aree** Una luminosità intorno al 28% dà `#68272d`, un vino spento per forme e illustrazioni, mai per il testo.
4. **Accento: più chiaro e morbido del brand** Porta il corallo a circa il 72% di luminosità: `#ea868e` raggiunge 7,6:1 sul fondo, mentre il corallo originale arriva a 5,1:1 e sembra più duro.
5. **Testo: un bianco sporco con una traccia della tonalità** `#f2e9e9` dà 16:1 sul fondo e si abbina con discrezione a tutto il resto.

- Fondo #170c0d: #170c0d
- Superficie #261718: #261718
- Vino profondo #68272d: #68272d
- Corallo tenue #ea868e: #ea868e
- Testo #f2e9e9: #f2e9e9

Una palette scura ricavata da un solo corallo. Ogni colore condivide la tonalità, ed è per questo che il set sembra un unico brand di notte.

## Usare una palette scura in CSS

Dai ai colori un nome in base al ruolo, così gli stessi componenti funzionano nei temi chiaro e scuro. Lo schema qui sotto definisce Inchiostro di mezzanotte come tema scuro e lascia scegliere all’impostazione del sistema. [Design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) tratta le decisioni più ampie, come immagini, bordi e grafici.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }
```

L’accento cambia tra i temi: navy profondo sul chiaro, pervinca sullo scuro. Un solo colore raramente funziona su entrambi.

## Palette scure per i post social

In un feed, un post scuro spicca tra foto luminose, ma solo se le parole si leggono alla dimensione del telefono. Mantieni grande il carattere, tieni la parte più luminosa dello sfondo lontana dal titolo e dai alle parole la zona più calma dell’inquadratura.

Un post verticale scuro per Instagram che annuncia un’apertura serale di una galleria, con testo chiaro su sfondo profondo

Un post scuro e cupo in cui il carattere sta sulla parte più calma dello sfondo e il bagliore resta lontano dalle parole.

Qui aiuta un Mark di Gradiently: sposta la sua zona più calma e a miglior contrasto dietro il testo e Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark, così uno sfondo cupo non inghiotte mai il titolo. Per look scuri con un carattere più ricco e premium, vedi [palette di colori di lusso](https://gradiently.design/it/guide/luxury-color-palettes) e l’[estetica dark academia](https://gradiently.design/it/guide/dark-academia-aesthetic).

## FAQ

### Quali colori compongono una palette di colori scuri?

Un quasi nero tinto per il fondo, un colore di superficie leggermente più chiaro, un colore intermedio profondo per le aree ampie, un accento più chiaro e un bianco sporco tenue per il testo.

### Devo usare il nero puro per la modalità scura?

Di solito no. Un quasi nero come #121212 o uno scuro tinto come #0b0f1a riduce l’abbaglio con il testo bianco e dà comunque un contrasto molto alto.

### Che colore di testo funziona meglio su uno sfondo scuro?

Un bianco sporco tenue come #e8e6f0 o #ededed. Mantiene un contrasto intorno a 15:1 o più senza la durezza del bianco puro.

### Perché i colori brillanti sembrano sbagliati su uno sfondo scuro?

I colori saturi sembrano vibrare contro il nero. Usa versioni più chiare e un po’ meno sature per gli accenti sui fondi scuri.