Teoria del Colore per il Web Design: Tonalita, Contrasto e Design System
Una guida pratica alla teoria del colore per il web design moderno -- impara le basi dell'HSL, le scale di tonalita, gli standard di contrasto WCAG e come costruire una palette coerente per il tuo design system.
Basi della Teoria del Colore per il Web Design
Il colore e uno degli strumenti piu potenti nel kit di un web designer. Influenza l'umore, guida l'attenzione, comunica l'identita del brand e modella la percezione della qualita. Per usare bene il colore sul web non serve essere artisti, ma e necessario capire alcuni fondamentali della teoria classica del colore.
Tonalita, Saturazione e Luminosita
Il web design moderno lavora quasi sempre nel modello di colore HSL (Hue, Saturation, Lightness) perche rispecchia come gli esseri umani pensano davvero al colore. A differenza di RGB, HSL ti permette di descrivere un colore come farebbe un designer.
- Tonalita e il colore stesso, in gradi da 0 a 360 sulla ruota cromatica. 0 rosso, 120 verde, 240 blu.
- Saturazione e l'intensita, da 0% (grigio) a 100% (pieno). Le palette brand sobrie si muovono sul 30-60%.
- Luminosita e quanto chiaro o scuro e il colore, da 0% (nero) a 100% (bianco). 50% e la versione piu pura.
Interiorizzato l'HSL, creare varianti diventa meccanico. Blu piu scuro per l'hover? Abbassa la luminosita. Tinta di sfondo piu delicata? Alza la luminosita e cala la saturazione.
Colori Primari, Secondari e Terziari
La teoria tradizionale divide le tonalita in tre gruppi. I primari (rosso, giallo, blu) non si ottengono da altri. I secondari (arancio, verde, viola) nascono dalla mescolanza di due primari. I terziari stanno tra un primario e un secondario.
Sul web questa gerarchia si traduce in relazioni cromatiche. Complementari opposti sulla ruota creano contrasto forte per i CTA. Analoghe vicine sono armoniose per sfondi e illustrazioni. Triadiche producono palette bilanciate.
Comprendere Tonalita e Tinte
Nel lavoro quotidiano usi raramente un solo colore. Un bottone ha colore base, hover, pressed, disabled, focus ring e tinta di sfondo. Tutti derivano da una scala di tonalita strutturata.
Shade vs Tint vs Tone
Un tint e un colore mescolato al bianco. Uno shade e mescolato al nero. Un tone e mescolato al grigio. Nella pratica e nei framework CSS "shade" si usa liberamente per qualsiasi variazione di luminosita.
La Scala 50-900 Spiegata
La scala numerica 50-900 e diventata standard de facto grazie a Material Design e Tailwind CSS. Ogni numero rappresenta un passo sull'asse di luminosita.
| Tonalita | Luminosita tipica | Uso comune |
|---|---|---|
| 50 | ~97% | Sfondi delicati |
| 100 | ~94% | Sfondi di card |
| 200 | ~87% | Elementi disabilitati, bordi |
| 300 | ~77% | Placeholder, icone inattive |
| 400 | ~65% | Testo secondario |
| 500 | ~50% | Colore brand base, bottoni primari |
| 600 | ~42% | Hover, link enfatici |
| 700 | ~34% | Bottoni pressed, titoli |
| 800 | ~25% | Superfici UI scure |
| 900 | ~15% | Accenti quasi neri |
La forza di questa scala e la prevedibilita.
Standard di Contrasto WCAG
Una palette bella che fallisce sull'accessibilita non e una palette riuscita. Le WCAG definiscono requisiti di contrasto misurabili.
Rapporti di Contrasto Spiegati
| Livello | Testo normale | Testo grande (18pt+ o 14pt grassetto) | Componenti UI |
|---|---|---|---|
| AA (minimo) | 4.5:1 | 3:1 | 3:1 |
| AAA (elevato) | 7:1 | 4.5:1 | - |
Perche l'Accessibilita Conta
Circa 1 uomo su 12 e 1 donna su 200 ha un deficit di visione cromatica. Aggiungi l'eta, schermi scarsi e riflessi e il pubblico che beneficia di buon contrasto e enorme. Oltre all'etica, molte regioni hanno ADA (USA) e EAA (UE) che rendono WCAG AA obbligatorio.
Costruire una Palette di Design System
Una palette di design system e un insieme strutturato di token con cinque livelli.
1. Colore Primario
E il volto del brand. Deve essere distintivo, accessibile sul bianco e avere scala 50-900 completa.
2. Colore Secondario
Supporta il primario. Spesso e una tonalita a 120-180 gradi dal primario.
3. Grigi Neutri
I neutri formano testo, bordi, sfondi e superfici. Molti sistemi usano neutri tinteggiati con un tocco della tonalita brand per coesione.
4. Colori Semantici
- Successo -- verde
- Avviso -- ambra o giallo
- Pericolo -- rosso
- Info -- blu
5. Livelli di Superficie e Sfondo
Definisci 3-5 token (background, surface, surface-raised, overlay) mappati sulla scala neutra. Questo rende la dark mode quasi gratis in seguito.
Come Usare il Nostro Generatore di Tonalita
Il nostro Generatore di Tonalita gratuito trasforma qualsiasi colore base in una scala 50-900 pronta per la produzione in pochi secondi.
Guida Passo Passo
- Apri lo strumento Generatore di Tonalita.
- Inserisci il colore base come codice hex (es. #3B82F6) o usa il selettore.
- Rivedi la scala generata con tutti i 10 toni da 50 a 900.
- Verifica il contrasto tramite l'anteprima di testo.
- Regola se necessario -- la scala si rigenera istantaneamente.
- Copia i valori o esporta l'intera palette.
- Ripeti per ogni ruolo: primario, secondario, neutro, successo, avviso, pericolo, info.
Consiglio di workflow
Genera prima solo il 500 di ogni colore, incolla in un frame Figma e itera. Poi espandi in scala completa.
Formati di Esportazione Spiegati
Proprieta Personalizzate CSS
Le variabili CSS sono l'opzione universale. Funzionano in ogni browser moderno e supportano il theming a runtime.
:root {
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-900: #1e3a8a;
}Variabili SCSS
Le variabili SCSS sono risolte in fase di compilazione. Scegli SCSS se usi gia Sass.
Config Tailwind CSS
Incolla l'oggetto esportato in tailwind.config.js sotto theme.extend.colors.
Token JSON
JSON si integra con Style Dictionary, Tokens Studio per Figma e Specify. Usalo quando devi sincronizzare colori tra web, iOS, Android.
Nota sulla privacy
Il nostro Generatore di Tonalita funziona 100% nel tuo browser. I tuoi colori non lasciano mai il dispositivo.
Genera la Tua Palette in un Istante
Crea scale di tonalita professionali per il tuo design system. Scegli un colore base ed esporta in CSS, SCSS, Tailwind o JSON -- 100% nel tuo browser.