Schema di colori per un sito web: come scegliere i colori

Un buon schema di colori per un sito web non è una moodboard di cinque colori preferiti. È una breve lista di ruoli, ciascuno affidato a un colore: lo sfondo della pagina, le superfici in rilievo, il testo del corpo, il testo più discreto, i bordi, un accento per le azioni e rosso, ambra e verde per gli stati. Scegli prima l’accento del brand, costruisci intorno a esso neutri calmi, verifica il contrasto di ogni abbinamento di testo, poi memorizza il risultato come variabili CSS così tutto il sito usa gli stessi valori.

I ruoli di cui ogni sito ha bisogno

Come scegliere i colori di un sito

1. 1

   Parti da un solo accento

   Il colore del tuo brand, o quello che vuoi che le persone associno a te. Se non ne hai uno, come scegliere i colori del brand può aiutarti.

2. 2

   Tingi i neutri verso di esso

   I grigi con un accenno della tinta dell’accento sembrano imparentati con esso. Un brand turchese ha grigi freddi, leggermente bluastri; un brand terracotta li ha caldi e cremosi.

3. 3

   Decidi chiaro, scuro o entrambi

   Scegli il tema che la maggior parte dei visitatori vedrà per primo e progettalo per intero prima di iniziare l’altro.

4. 4

   Controlla ogni abbinamento di testo

   Testo su sfondo, testo su superficie, testo attenuato su entrambi, bianco sul pulsante accento. Correggi tutto ciò che è sotto 4,5:1.

5. 5

   Applica 60, 30, 10

   Circa 60% sfondo, 30% superfici e testo, 10% accento. La regola del 60 30 10 spiega l’equilibrio.

Tre palette per siti web da cui partire

Regole di contrasto che mantengono leggibile un sito

Le linee guida WCAG sul contrasto fissano il minimo: 4,5:1 per il testo normale, 3:1 per il testo grande (circa 24 px, o 19 px in grassetto) e 3:1 per i componenti dell’interfaccia come i bordi dei campi e le icone che portano significato. Il contrast checker di WebAIM verifica qualsiasi coppia. La nostra guida al contrasto dei colori ne spiega i motivi e i casi limite.

Scrivere lo schema di colori come token

Memorizza ogni ruolo una volta sola come proprietà personalizzata CSS e usa solo quelle variabili nei tuoi stili. Così un tema scuro, una campagna stagionale o un rebranding sono la modifica di un solo blocco di valori, non una ricerca in ogni file. È l’idea alla base dei design token.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

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

La dark mode è uno schema a sé

Invertire una palette chiara raramente funziona. Gli accenti saturi brillano troppo sul nero, le ombre scompaiono e il testo bianco puro causa abbagliamento. Costruisci la dark mode come un secondo gruppo di valori: uno sfondo quasi nero con un accenno di tinta, superfici che si schiariscono man mano che salgono, testo più morbido e un accento schiarito fino a raggiungere il contrasto. Il design della dark mode approfondisce.

Dove va il colore del brand oltre i pulsanti

Se l’accento è usato solo sui pulsanti, il sito può sembrare generico. La risposta non è più accento ovunque, ma un punto in cui il brand può essere espressivo: l’hero, una fascia di funzionalità o il footer. Un gradiente ricco nella famiglia del brand funziona bene lì, mentre il resto della pagina resta calmo e leggibile.

Un Mark di Gradiently può essere quello strato espressivo: uno sfondo che nessun altro ha, che sceglie per ogni riga un colore di testo dalla propria palette così i titoli restano leggibili. Per altri abbinamenti, vedi l’armonia dei colori e il design della sezione hero.