Guida teoria del colore
Impara armonia colore, contrasto e scelte palette per UI design.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Fondamenti di teoria del colore per UI design
La teoria del colore classica (Itten, Albers) nasce per la pittura. Applicarla al design digitale richiede adattamenti precisi, perché gli schermi usano luce emessa (RGB) anziché pigmenti (CMYK) e i vincoli di leggibilità cambiano tutto.
Hue, Saturazione, Luminosità (HSL): il modello HSL è il più intuitivo per i designer. Hue è il "tipo" di colore (0-360°), saturazione quanto è vivace (0% grigio, 100% puro), luminosità quanto è chiaro o scuro (0% nero, 100% bianco). Per UI, lavora spesso riducendo la saturazione dei colori di sfondo (15-30%) e mantenendola alta solo per gli accenti.
Armonía colore: complementare (180°) crea tensione visiva — usa per evidenziare. Analogo (±30°) crea coerenza — usa per aree estese. Triadico (120° equidistanti) bilancia vivacità e varietà — usa per sistemi di design con tre ruoli cromatici distinti.
Contrasto e accessibilità: il contrasto percepito non dipende solo dalla differenza di luminosità. Il rapporto WCAG misura la luminanza relativa (Y nel modello CIE XYZ), che tiene conto di come l'occhio risponde diversamente alle frequenze RGB. Un verde puro sembra più luminoso di un blu della stessa "luminosità" HSL.
Temperatura colore: i toni caldi (rosso, arancione, giallo) avanzano visivamente e aumentano la percezione di energia. I toni freddi (blu, verde-azzurro) arretrano e calmano. Nelle UI, usa i caldi per azioni urgenti (CTA, avvisi) e i freddi per contenuto informativo stabile.
Teoría del colore applicata
- Scegliere il brand color: considera settore (convenzionale vs. disruptive), target demografico (adulti preferiscono toni desaturati, bambini colori saturi), e differenziazione dai competitor.
- Costruire scale neutrali: i grigi perfettamente neutri sembrano sterili. Usa grigi "tinted" con 5-10% di saturazione nel hue del brand per coerenza cromatica.
- Gestire il colore degli stati: rosso errore, verde successo, giallo avviso sono convenzioni radicate. Modificale solo se hai una ragione forte — gli utenti si aspettano questi pattern.
- Dark mode: non invertire semplicemente i colori — riprogetta la palette. I colori saturati su sfondo scuro vibrano troppo; riduci la saturazione del 20-30% per la variante dark.
FAQ — Teoría del colore
Qual è la differenza tra RGB, HSL e OKLCH?
RGB descrive i colori come combinazione di rosso, verde e blu — è il formato nativo degli schermi. HSL riformula gli stessi colori in termini più intuitivi (hue, saturazione, luminosità). OKLCH è un modello perceptualmente uniforme: una variazione uguale di luminosità L appare visivamente uguale indipendentemente dall'hue, il che non è vero in HSL. Per generare scale di colore uniformi, OKLCH dà risultati molto migliori.
Quanti colori dovrebbe avere una palette UI completa?
Una palette operativa contiene: 1-2 colori brand (primario, eventualmente secondario), 1 accento, una scala neutra (6-10 step), 3 colori semantici (errore, successo, avviso). In totale 15-25 valori. Più di così tende a creare incoerenza; meno spesso non copre tutti i casi d'uso dell'interfaccia.
I colori hanno davvero effetti psicologici?
La psicolog?a del colore esiste, ma è molto più culturale e contestuale di quanto i "color meaning" universali suggeriscano. Il bianco significa purezza in occidente e lutto in alcune culture asiatiche. Il rosso è pericolo in UI ma celebrazione in molte culture. Ciò che funziona sempre è il contrasto, la coerenza interna e il rispetto delle convenzioni del settore specifico.
Come creo grigi che non sembrino piatti?
Usa grigi "warm" o "cool" anziché neutri puri. Un grigio con 5-8% di saturazione nel hue del brand primary sembra parte del sistema cromatico, non un elemento separato. Esempio: per un brand blue (#2563eb), usa neutri con hue ~220° e saturazione 6-8% invece di hue 0° saturazione 0%.
Dove posso approfondire la teoria del colore per il design digitale?
"Interaction of Color" di Josef Albers rimane fondamentale per la percezione. Per il digitale, il blog di Björn Ottosson (autore di OKLCH e OKHSV) è la risorsa più aggiornata sulla scienza del colore perceptuale. Refactoring UI di Adam Wathan e Steve Schoger copre l'applicazione pratica nel design di interfacce.