Palette di colori scuri: codici cupi che restano leggibili

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

Notte nel bosco

Rosso sangue di bue e rame

Melanzana

Carbone e brace

Verde acqua profondo

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 e gradienti cupi.

Regole per palette scure che si leggono

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.

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. Qui un colore di brand corallo, #e0525d, diventa un set scuro completo.

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

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 tratta le decisioni più ampie, come immagini, bordi e grafici.

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

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.

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 e l’estetica dark academia.