La maggior parte dei consigli sullo "schema di colori per un sito web" crolla nel momento in cui apri un vero file di progettazione. Scegli tre bei campioni da un generatore, li butti dentro un layout e nel giro di un'ora stai improvvisando un quarto colore per il messaggio di errore, un quinto per il testo smorzato delle didascalie e un sesto perché il blu del brand originale è illeggibile su bianco. Il problema non è il tuo gusto. È che un sito web non ha bisogno di una palette di bei colori — ha bisogno di un piccolo sistema a livelli in cui ogni colore ha un compito.
Ho pubblicato abbastanza interfacce da conoscere il divario tra "adoro questi colori" e "questo sito è usabile". Questa guida è il metodo che uso davvero per passare dal primo al secondo, e come assemblarlo da una palette che generi invece di tirare a indovinare al buio.
Quanti colori serve davvero a un sito web
Molti meno di quanti la gente pensi, e molti più di tre.
La confusione nasce dal confondere le tonalità con i colori usati nell'UI. Un sito pulito potrebbe essere costruito su sole due o tre tonalità — diciamo un blu brand e un grigio caldo — ma queste si espandono in oltre quindici valori effettivi una volta che consideri sfondi, bordi, testo a diversi livelli di enfasi, stati hover e così via. Quindi la risposta onesta è: punta a una o due tonalità vere più un insieme disciplinato di neutri, poi deriva tutto il resto.
Se ti ritrovi a cercare una tonalità davvero nuova e slegata, fermati. Nove volte su dieci non ti serve un altro colore — ti serve una versione più chiara o più scura di uno che hai già. Quella singola abitudine previene quell'aspetto fangoso da tendone del circo che urla "dilettante".
Il set a livelli: assegna un compito a ogni colore
Pensa per livelli, non in una fila piatta di campioni. Ecco la struttura che costruisco ogni volta, dall'alto verso il basso.
1. Il colore primario / del brand
È il colore che un visitatore nominerebbe se gli chiedessi cosa "è" il tuo sito. Porta personalità e dovrebbe comparire sulle cose che vuoi più notate — il logo, i pulsanti principali, la navigazione attiva. Scegli questo per primo, perché tutto il resto reagisce a esso.
Un avvertimento dall'esperienza: un colore brand saturo non è quasi mai leggibile come testo di corpo né utilizzabile come grande sfondo. Il viola di Stripe, il verde di Spotify, il quasi-nero di GitHub — in pratica questi brand usano la loro tonalità distintiva con parsimonia e si appoggiano ai neutri per l'altro 90% della superficie. Il tuo colore brand è una spezia, non il piatto. Se stai scegliendo la tonalità da zero, le associazioni emotive contano, e La psicologia del colore nel branding è il posto migliore per ragionare su quale tonalità, meglio di qualsiasi anteprima di generatore.
2. Una rampa di neutri / sfondi
È l'eroe non celebrato di ogni sito dall'aspetto professionale, e il livello che i principianti saltano. Vuoi una rampa di neutri — non un solo grigio, ma un gradiente di cinque-otto passi dal quasi-bianco al quasi-nero. Qualcosa come #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.
Un grigio puro (R, G, B uguali) va bene, ma un neutro tinteggiato appare più intenzionale — sposta la tonalità di qualche grado verso il colore del brand e abbassa la saturazione intorno al 5–10%. Un grigio che tende al blu sotto un brand blu si legge come "progettato"; un grigio neutro morto si legge come "Bootstrap predefinito". Usa questi passi per gli sfondi delle pagine, le superfici delle card, i divisori e gli stati disabilitati. Vale la pena capire bene la meccanica per generare una rampa coerente — vedi Tinte, sfumature e toni spiegati.
3. Colori del testo leggibili (e la regola di contrasto che li governa)
Il testo di corpo è raramente nero puro su bianco puro — #000000 su #FFFFFF può risultare aspro e causare un effetto vibrante e affaticante per alcuni lettori. Di solito imposto il testo primario intorno a #1A1D21 e definisco altri due livelli: testo secondario verso #5A6068 per didascalie e metadati, e un grigio disabilitato/placeholder verso #9AA0A8.
Ma il vincolo reale qui non è estetico, è misurabile. Secondo le linee guida WCAG del W3C, il testo di corpo di dimensione normale ha bisogno di un rapporto di contrasto di almeno 4.5:1 rispetto allo sfondo per soddisfare il Livello AA; il testo grande (circa 24px, o 18.66px in grassetto) ha bisogno solo di 3:1. Quel grigio secondario che ti piaceva? Verificalo. L'errore di accessibilità più comune che vedo è il testo "tenue" grigio chiaro su bianco che si attesta intorno a 2.8:1 — grazioso nel mockup, illeggibile alla luce del sole. Passa ogni coppia testo-su-sfondo attraverso il contrast checker WCAG presente ne il generatore di palette prima di confermare. Se vuoi capire cosa misura davvero il rapporto e perché 4.5:1 è la soglia, I rapporti di contrasto WCAG spiegati approfondisce.
4. Un colore di accento / CTA
Ecco una mossa controintuitiva: il colore della tua call-to-action spesso non è il colore del tuo brand. Se il tuo brand è blu e anche i tuoi pulsanti principali sono blu, il pulsante "Compra ora" compete con ogni link e header per l'attenzione. Un accento distinto — spesso una tonalità complementare o complementare frazionata — fa balzare fuori dalla pagina l'unica azione a cui tieni.
Generalo deliberatamente. Posiziona la tonalità del tuo brand sulla ruota, passa a un'armonia complementare o complementare frazionata, e otterrai un candidato abbastanza teso da catturare lo sguardo senza stridere. Un brand blu (#2563EB) si abbina in modo pulito a un accento ambra caldo o corallo (#F59E0B / #F97316) per la CTA principale. Riserva questo colore quasi interamente ai momenti di conversione — nel momento in cui lo usi per decorazione, smette di significare "clicca qui".
5. Colori di stato semantici
Ogni interfaccia reale prima o poi deve dire successo, avviso, errore e info. La maggior parte prende in prestito i valori predefiniti ovvi — verde, giallo, rosso, blu — e si ferma lì, il che causa due problemi.
Primo, il rosso e il verde da manuale stridono con colori brand scelti con cura e sembrano un linguaggio di design separato e più chiassoso, appiccicato sopra. La soluzione è portare quelle tonalità verso la saturazione e il calore complessivi della tua palette, così da farle sembrare di famiglia. Punta a qualcosa come successo #16A34A, avviso #D97706, errore #DC2626, info #2563EB, poi regola la saturazione perché corrisponda agli altri tuoi colori.
Secondo — e questo conta di più — non affidarti mai al solo colore per comunicare uno stato. Circa 1 uomo su 12 e 1 donna su 200 hanno qualche forma di deficit della visione cromatica, e rosso/verde è la confusione classica. Abbina sempre il colore di stato a un'icona, un'etichetta o una forma. Un bordo rosso e un messaggio "✕ Campo obbligatorio". Una spunta verde e la parola "Salvato". Questo è un requisito WCAG, non un vezzo, ed è la singola abitudine di accessibilità a più alto rendimento che puoi costruire. Se il tuo pubblico o prodotto è sensibile al colore, Palette adatte ai daltonici spiega come verificarlo direttamente.
6. Colori dei link, hover e focus
Il livello più piccolo, e quello che separa i siti curati da quelli sciatti.
- I link di solito prendono il colore del brand, ma verifica il contrasto rispetto alla superficie su cui poggiano — un colore brand calibrato per i pulsanti è spesso troppo chiaro per i link di testo in linea.
- L'hover dovrebbe essere una sfumatura derivata, non un nuovo colore: prendi la base e sposta la luminosità verso il basso dell'8–12% in HSL. Coerente, prevedibile, gratis.
- Gli anelli di focus sono irrinunciabili per gli utenti da tastiera. I WCAG 2.1 richiedono anche che i componenti dell'interfaccia e i loro stati raggiungano un rapporto di contrasto non testuale di 3:1, quindi un contorno di focus sbiadito che "sembra pulito" ma si vede a malapena è una bocciatura. Rendilo evidente.
Assemblarlo da una palette generata
Ecco il flusso di lavoro che trasforma l'output di un generatore nel sistema descritto sopra, invece di cinque campioni da recuperare in seguito.
Inizia bloccando la tonalità del tuo brand sulla ruota. Usa una regola di armonia per proporre, non per dettare — analoga se vuoi una sensazione calma e coesa; complementare o complementare frazionata se ti serve un accento incisivo. (Se sei indeciso tra gli schemi, Palette complementari frazionate vs triadiche analizza i compromessi.) Copia l'esadecimale del brand e quello dell'accento; sono i livelli 1 e 4.
Poi costruisci i neutri deliberatamente. Prendi la tonalità del tuo brand, abbassa la saturazione a circa l'8% e usa il valore HSL per graduare la luminosità da ~98% fino a ~14% in cinque o sei passi. Questa è la tua intera rampa di neutri — il livello 2 — e poiché condivide la tonalità del brand, apparirà unificata invece che innestata. Deriva i colori del testo dall'estremità scura di quella rampa (livello 3), e verifica ciascuno rispetto al suo sfondo con lo strumento di contrasto finché ogni accoppiamento supera 4.5:1.
Per gli stati semantici, genera verde/ambra/rosso/blu separatamente, poi ritocca la loro saturazione nei campi HSL perché si affianchino alla tua palette anziché urlarle sopra. Infine, deriva i valori di hover e focus spostando la luminosità su colori che hai già — nessuna nuova tonalità richiesta.
Il motivo per lavorare in HSL per tutto il processo è che rende "un po' più chiaro" o "un filo meno saturo" una modifica di un solo numero invece di un gioco a indovinare tra tre canali RGB. Se questa rappresentazione è nuova per te, Codici colore HEX, RGB e HSL spiegati vale dieci minuti.
Un passaggio che ti risparmia un redesign
Prima di innamorarti di qualsiasi schema, incolla i tuoi valori finali in un wireframe grigio e ricco di testo — titoli veri, paragrafi veri, pulsanti veri — e guardalo per un minuto intero. Il colore seduce sempre in una griglia di campioni e delude in un layout, perché il contesto, i neutri circostanti e le proporzioni cambiano tutto. La regola del 60-30-10 ti dà proporzioni che vale la pena rispettare qui: per lo più neutro, una quantità significativa di brand, una piccola scossa di accento.
Uno schema di colori per un sito web non è un insieme di colori che ti piacciono. È un insieme di decisioni — cosa è brand, cosa è superficie, cosa è leggibile, cosa è clicca qui, cosa è "qualcosa è andato storto" — ciascuna assegnata, testata e riutilizzata con disciplina. Azzecca i compiti e quasi ogni palette di buon gusto funzionerà. Salta i compiti e perfino una palette bellissima ti combatterà su ogni schermata.
Domande frequenti
Quanti colori dovrebbe usare un sito web?
Punta a una o due tonalità vere — un colore brand primario più un accento — sostenute da una rampa di cinque-otto neutri derivati da un unico grigio. Quelle poche tonalità si espandono in circa 15 valori effettivi una volta che consideri sfondi, bordi, livelli di testo, stati hover e colori semantici. Se ti ritrovi a cercare una tonalità davvero nuova e slegata, quasi sempre ti serve invece una versione più chiara o più scura di un colore esistente.
Il pulsante della mia call-to-action dovrebbe usare il colore del brand?
Spesso no. Se il colore del tuo brand è anche il colore dei link, dell'header e dei pulsanti, la tua CTA principale non ha nulla contro cui risaltare. Un accento distinto — spesso una tonalità complementare o complementare frazionata rispetto al brand — fa spiccare l'unica azione a cui tieni. Riserva quell'accento quasi esclusivamente ai momenti di conversione, così continua a significare 'clicca qui'.
Che rapporto di contrasto devono avere i colori del testo del mio sito?
Secondo i WCAG 2.1/2.2 Livello AA, il testo di corpo normale ha bisogno di almeno un rapporto di contrasto di 4.5:1 rispetto allo sfondo, e il testo grande (circa 24px, o 18.66px in grassetto) di almeno 3:1. I componenti dell'interfaccia e i loro stati, come gli anelli di focus e i bordi dei campi, hanno bisogno di almeno 3:1. Verifica ogni coppia testo-su-sfondo con un contrast checker prima di confermare — il testo 'tenue' grigio chiaro su bianco è l'errore più comune.
Come faccio a far rientrare i miei colori di errore e successo nella palette?
Parti dalle tonalità convenzionali (verde, ambra, rosso, blu) ma porta la loro saturazione e calore verso il resto della palette, così da leggersi come famiglia anziché come un set posticcio. Fondamentale: non affidarti mai al solo colore per segnalare uno stato — abbina ogni colore di stato a un'icona, un'etichetta o una forma, così il significato sopravvive per il circa 1 uomo su 12 con deficit della visione cromatica. Questo è un requisito WCAG, non solo buona educazione.
Perché costruire i neutri a partire dal colore del brand invece che da un grigio semplice?
Una rampa di grigi puri sembra l'impostazione predefinita di un framework lasciata intatta. Se prendi la tonalità del tuo brand, abbassi la saturazione intorno al 5–10% e gradui la luminosità per creare i tuoi grigi, i neutri echeggiano sottilmente il brand e l'intera interfaccia appare intenzionale e coerente. Lavorare in HSL rende questa una regolazione di un solo numero invece di un destreggiarsi tra tre canali RGB.
Vuoi sperimentare con i colori?
Prova il nostro generatore di palette gratuito per trovare la tua armonia perfetta — con verifica del contrasto WCAG integrata.
Apri il generatore