Sir Isaac Newton inventò la ruota dei colori nel 1666, gettando le basi per la teoria del colore moderna. La sua curiosità per la luce lo portò a sperimentare facendo passare attraverso un prisma la luce bianca e scomponendola così in uno spettro di colori. Questo fenomeno ispirò Newton a disporre questi colori in un formato circolare, creando la prima ruota dei colori. Questo ingegnoso diagramma permise di dimostrare come i colori si relazionano tra loro e delineò un modo strutturato per comprendere come interagiscono e si mescolano. La ruota dei colori di Sir Isaac Newton rimane tuttora uno strumento fondamentale nella scienza e nell'arte.

In genere, una ruota dei colori standard include 12 colori: tre colori di base (rosso, giallo, blu, noti come colori primari), tre colori secondari (arancione, verde, viola) e sei colori terziari (rosso arancio, giallo arancio, verde giallastro, verde bluastro, blu violaceo, viola rossastro).

Le ruote dei colori avanzate incorporano uno spettro più ampio di tinte, sfumature e toni per un design cromatico più raffinato, particolarmente utile per la progettazione digitale e delle interfacce utente. Questo ampliamento offre ai designer un controllo più preciso sulla selezione dei colori, facilitando la creazione di palette colori e temi complessi e raffinati.

Usare una ruota dei colori è un modo semplice ed efficace per creare una palette colori accattivante e coerente per qualsiasi progetto. Ecco come si fa:

1° passaggio: scegli un colore di base.

Usa il selettore del colore per scegliere un colore di base sulla ruota. Questo colore sarà la base della tua palette colori, definirà il tono e il carattere del tuo design e guiderà la selezione dei colori aggiuntivi.

2° passaggio: scegli uno schema di colore.

Scegli uno schema di colore. Ogni schema fornisce un impatto visivo differente:

• Complementare: offre il massimo contrasto utilizzando colori direttamente opposti tra loro.
• Triadico: crea un aspetto vivace ma equilibrato utilizzando colori disposti in una formazione triangolare.
• Analogo: produce un effetto armonioso con colori adiacenti l'uno all'altro.
• Complementare divergente (o split): offre un look ad alto contrasto con meno tensione, utilizzando il colore di base e due colori adiacenti come complemento.
• Quadrato: esalta la diversità con quattro colori equidistanti sulla ruota.
• Monocromatico: sfrutta il potere della luminosità (tinte) e dell'oscurità (ombre) per creare transizioni morbide e contrasti decisi a seconda del colore di base.

3° passaggio: applica la scelta al tuo design.

Una volta trovata la palette colori più adatta per il tuo progetto, applicala al design per ottenere l'impatto visivo desiderato.

La teoria del colore fornisce ai designer un quadro di riferimento per creare la combinazione di colori perfetta e trasmettere l'impressione desiderata, ad esempio la raffinatezza usando i viola e gli oro intensi o il senso di calma con i blu e i verdi tenui. Che tu voglia catturare l'attenzione con combinazioni ad alto contrasto o creare un'atmosfera armoniosa, comprendere la teoria del colore è fondamentale. Ecco una panoramica di alcuni concetti fondamentali:

Quali sono i colori primari (RYB)?

I colori primari nel modello di colore RYB sono rosso, giallo e blu. Questi tre colori costituiscono la base della ruota dei colori e possono essere mescolati in proporzioni diverse per creare tutti gli altri colori.

Quali sono i colori secondari?

I colori secondari occupano lo spazio tra un colore primario e l'altro sulla ruota dei colori e si formano mescolando due tonalità primarie. Ad esempio, mescolando il rosso e il blu si ottiene il viola, mentre combinando il rosso e il giallo si ottiene l'arancione. Per ricordarti come si ottiene il verde, ti basterà guardare i colori primari adiacenti e troverai la risposta: giallo e blu.

Quali sono i colori terziari?

A riempire il resto della ruota ci sono i colori terziari, o colori intermedi. Questi colori si ottengono mescolando un colore primario e uno secondario. Ad esempio, mescolando il rosso e l'arancione ottieni il rosso arancio, che riempie lo spazio mancante tra i due. Con una ruota dei colori scorrevole, puoi regolare la tonalità specifica di rosso arancio che desideri in base alla tua posizione sulla ruota. Puoi anche mescolare verde bluastro, blu violaceo, rosso arancio, viola rossastro, giallo arancio e verde giallastro per creare colori terziari unici. Questa capacità di selezione granulare del colore aiuta i designer di prodotti a trovare la tonalità esatta e i colori d'accento che desiderano.

Quali sono i sette schemi di colore?

Gli schemi di colore sono combinazioni strategiche di colori che aiutano a raggiungere l'equilibrio visivo. Questi schemi utilizzano i principi della teoria del colore per creare design esteticamente gradevoli. Esistono sette tipi principali di schemi di colore:

Colori complementari

I colori complementari abbinano colori dai lati opposti della ruota dei colori per creare un contrasto elevato. Per trovare un colore complementare, ti basta scegliere un colore e poi fare un giro di 180° intorno alla ruota dei colori. Alcuni schemi di colore complementari sono ben noti e popolari, come rosso e verde. Questi schemi di colore possono risultare efficaci se vuoi che nel tuo design siano presenti sia colori caldi che freddi.

Colori complementari per #693EFE

Colori complementari divergenti

I colori complementari divergenti o split sono combinazioni di colori in cui si combina un colore di base con i due colori terziari adiacenti su entrambi i lati del colore. In questo modo si ottiene una palette di tre colori e si crea una tavolozza di colori più discreta.

Colori complementari divergenti per #693EFE

Colori monocromatici

I colori monocromatici sono probabilmente i più facili da comprendere perché sono semplicemente una versione più chiara e più scura del colore primario prescelto. Uno schema di colore monocromatico elimina la necessità di prendere decisioni complesse legate all'uso di diversi colori contrastanti e generalmente permette ai designer di usare il colore in modo efficace e raffinato. Per creare una palette colori monocromatica, modifica le tonalità più chiare e più scure nella stessa misura rispetto al colore primario.

Colori monocromatici per #693EFE

Analoghe

I colori analoghi sono gruppi di tre colori che si trovano uno accanto all'altro sulla ruota dei colori. Essi permettono di creare una palette colori più morbida e naturale. La natura, dopotutto, ha molte tonalità strettamente correlate. Pensa alle foglie di un albero o alle sottili differenze del colore del mare. Uno schema di colore analogo risulta relativamente armonioso e può aiutare a unire diversi elementi di un design.

Colori analoghi per #693EFE

Triadiche

Uno schema di colore triadico presenta tre colori ugualmente contrastanti. I punti sono distribuiti in modo uniforme attorno alla ruota dei colori, formando un triangolo equilatero. Quando progetti con uno schema di colore triadico, è meglio scegliere un solo colore primario e usare gli altri due come accenti. Gli schemi di colore triadici tendono a essere più audaci e giocosi.

Colori triadici per #693EFE

Tetradico (doppio complementare)

Cosa hanno in comune Google e Microsoft? Entrambi usano palette colori tetradiche per i propri loghi. Con tetradico si indica "un gruppo di quattro", quindi in questo caso utilizziamo la ruota dei colori per selezionare quattro colori che vanno a formare un rettangolo. Questi includono due serie di colori complementari per creare una palette vivace ed energica. Uno schema di colore tetradico è talvolta chiamato "doppio complementare".

Colori tetradici per #693EFE

Quadrate

In maniera analoga al tetradico, anche uno schema di colore quadrato utilizza quattro colori, che in questo caso sono però equidistanti sulla ruota dei colori. Questo crea un aspetto più equilibrato rispetto al contrasto elevato degli schemi tetradici. Come per gli schemi di colore tetradici, è meglio scegliere un colore dominante e usare gli altri come accenti.

Colori caldi o colori freddi

La ruota dei colori distingue tra tonalità calde e fredde. I colori caldi, come il rosso, l'arancione e il giallo, trasmettono intensità. I toni freddi, come il viola, il blu e il verde, evocano invece sensazioni di calma e relax. Hai notato come l'app di meditazione Calm usa principalmente il colore blu? È stato scelto intenzionalmente per evocare un senso di pace.

Un modello di colore è un sistema che aiuta a rappresentare i colori utilizzando valori numerici. I quattro modelli di colore utilizzati in questa pagina sono:

1. Rosso, verde e blu (Red, Green, Blu, RGB)
2. Ciano, magenta, giallo e nero (Cyan, Magenta, Yellow, Key, CMYK)
3. Tonalità, saturazione e luminosità (Hue, Saturation, Lightness, HSL)
4. Codici esadecimali

Rosso, verde, blu (RGB)

Il modello di colore rosso, verde, blu (RGB) è la base per qualsiasi design che viene visualizzato su uno schermo. Le sue radici si fondano sulla percezione umana dei colori e sul modo in cui gli occhi interagiscono con la luce. Questi "colori additivi" possono essere combinati per generare l'ampia gamma di colori con cui interagiamo ogni giorno sui nostri schermi.

Ciano, magenta, giallo e nero (CMYK)

Il modello CMYK, invece, è alla base di tutta la grafica per la stampa. Questi "colori sottrattivi" assorbono le lunghezze d'onda della luce, che corrispondono più chiaramente ai pigmenti presenti nel mondo reale.

• Ciano (C): il ciano è un colore verde bluastro. Quando l'inchiostro ciano viene applicato su una superficie, assorbe la luce rossa e all'occhio umano appare il verde bluastro.
• Magenta (M): il magenta è un colore rosso violaceo. Assorbe la luce verde, portando alla percezione di una tonalità rossastra violacea.
• Giallo (Y): il giallo assorbe la luce blu, risultando in un colore giallastro quando viene stampato.
• Key (K) o nero: la "K" in CMYK sta per "Key", che si riferisce al componente nero. L'inchiostro nero viene usato per migliorare la profondità e il contrasto di immagini e testi. Inoltre, l'uso dell'inchiostro nero aiuta a evitare che i colori si confondano, cosa che può succedere quando si cerca di ottenere il nero mescolando altri colori.

Tonalità, saturazione e luminosità

La tonalità rappresenta i colori che appaiono sulla ruota dei colori. Considerala uno spettro all'interno di un cerchio di 360°. Quando ti sposti intorno a questo cerchio, incontrerai le diverse tonalità.

• Tonalità di colore: la definizione di tonalità è complessa, ma in sostanza si riferisce ai colori presenti sulla ruota dei colori. La ruota dei colori è un cerchio di 360° e man mano che lo percorri puoi incontrare le diverse tonalità.
• Saturazione: la vivacità o l'intensità di una tonalità, nota come saturazione, ne riflette la ricchezza e la purezza.All'esterno della ruota dei colori si vede una tonalità a piena saturazione. Man mano che ci si sposta verso il centro del cerchio, la tonalità diventa meno intensa. Per ridurre l'intensità delle tonalità aggiungiamo il bianco e il nero (cioè, il grigio).
• Luminosità: la luminosità determina la quantità di nero o di bianco che aggiungiamo a un colore. Puoi ottenere colori pastello aggiungendo più bianco, mentre per una palette più scura e intensa dovrai aggiungere più nero.

Sfumature e tinte per #693EFE

Sfumature

Tinte

Codici esadecimali

I codici esadecimali (o codici hex) indicano al computer la quantità di rosso, verde e blu da mescolare insieme per produrre il colore di un pixel sullo schermo.

Ogni pixel sullo schermo è composto da tre elementi di colore che emettono luce rossa, verde e blu. Questi elementi di colore (chiamati subpixel) sono così piccoli che all'occhio umano appaiono come un unico colore.

Mescolando diverse quantità di luce rossa, verde e blu, ogni pixel può visualizzare fino a 16 milioni di colori, che superano ciò che l'occhio umano può percepire.

Ogni pixel può combinare 256 valori di rosso, 256 valori di verde e 256 valori di blu per generare 16 milioni di possibilità di colore (moltiplicando 256 x 256 x 256, il risultato supera 16 milioni). I computer inviano questi valori a ciascun pixel utilizzando un codice binario, un linguaggio composto da 1 e 0. Ad esempio, un valore rosso di 200 verrebbe rappresentato come 11001000 in codice binario. Poiché il codice binario è incomprensibile per gli esseri umani, il sistema esadecimale viene impiegato come alternativa leggibile.

Come funziona il codice esadecimale?

Un codice esadecimale, o hex, ha tre valori: uno per il rosso, uno per il verde e uno per il blu, ciascuno rappresentato da due cifre. Ad esempio, #F234A2 è composto da:

• Rosso: F2
• Verde: 34
• Blu: A2

Ma a cosa servono le lettere? Diversamente dal sistema decimale a cui siamo abituati, il sistema esadecimale ha base 16. Va da 0 a 9, quindi utilizza le lettere da A a F per rappresentare i numeri da 10 a 15.

Come si effettua la conversione tra codici hex ed RGB

Poiché i codici hex e i valori HSL sono semplicemente dei modi diversi di rappresentare il modello di colore RGB, puoi convertirli tra loro. Generalmente, la conversione di un codice hex in un valore RGB non è un'operazione che si esegue a mano, ma può comunque essere effettuata con un rapido calcolo matematico. Per ciascuno dei tre valori:

• Prendi il primo numero (o lettera) e moltiplicalo per 16
• Aggiungi il secondo numero (o lettera)

Per #E234A2, il primo valore è E2, che rappresenta il numero 226 (14 × 16 + 2). Questo numero è il valore RGB per il colore rosso. Pertanto, #E234A2 ha i seguenti valori RGB:

• Rosso: 226
• Verde: 49
• Blu: 152

(Puoi anche convertire i codici hex o i valori RGB in valori HSL, ma i calcoli diventano un po' più complessi!)

Profili colore nel design digitale: sRGB e P3

I vari dispositivi, monitor, browser e applicazioni utilizzano tecnologie diverse per la resa cromatica, il che può comportare disparità visive tra un dispositivo e l'altro. Quando si progetta per le piattaforme digitali è fondamentale considerare i profili colore, in quanto stabiliscono uno standard coerente per la definizione e la resa dei colori in base allo schermo specifico.

I profili colore nel design digitale, come sRGB e P3, assicurano una resa uniforme su tutti i dispositivi. L'sRGB è stato per decenni lo standard web per i creatori di contenuti e i web designer, garantendo coerenza visiva sulla maggior parte dei dispositivi di consumo. Lo spazio colore Display P3, spesso abbreviato in P3, è in grado di riprodurre uno spettro di colori con una maggiore vivacità, riuscendo a rappresentare il 49% di colori distinguibili in più rispetto all'sRGB. Tuttavia, utilizzare il P3 su smartphone o laptop progettati per l'sRGB potrebbe comportare un consumo energetico eccessivo, in quanto il dispositivo deve lavorare di più per riprodurre una gamma di colori più estesa. Se stai progettando per piattaforme come iOS o schermi ad alta definizione/retina, il Display P3 è la scelta migliore, ma non tutte le applicazioni e i software supportano pienamente la sua gamma di colori più ampia.

Scopri come Figma supporta i profili colore P3 qui.

WCAG e accessibilità dei colori

Nel 1999, il World Wide Web Consortium (W3C) ha pubblicato la prima versione delle Web Content Accessibility Guidelines (WCAG). Questo documento tecnico garantisce che i contenuti web siano accessibili a tutti gli utenti. Riconosciute come standard mondiale per l'accessibilità del web, le raccomandazioni del W3C hanno un'influenza significativa all'interno delle comunità di sviluppo web e di progettazione digitale. L'organizzazione pubblica aggiornamenti continui che riflettono i progressi tecnologici e le nuove esigenze in materia di accessibilità.

Il documento attuale, WCAG 2.1, amplia le linee guida sull'accessibilità del web affrontando una gamma più ampia di disabilità, inclusi i disturbi cognitivi, e l'uso dei dispositivi mobili, per creare un'esperienza web più inclusiva. Un aspetto critico trattato nelle linee guida è l'accessibilità visiva, in particolare l'importanza del contrasto nel design dei colori. Un contrasto adeguato assicura che il testo e gli elementi interattivi risaltino sui colori di sfondo, un fattore essenziale per gli utenti con disabilità visive come daltonismo o ipovisione.

Le raccomandazioni WCAG specificano i rapporti minimi di contrasto per il testo e le immagini contenenti testo, per garantire che tutti gli utenti possano accedere alle informazioni indipendentemente dalle loro capacità visive. Ad esempio, per il testo normale si consiglia un rapporto di contrasto minimo di 4,5:1, mentre il testo più grande deve avere un rapporto di almeno 3:1.

Le WCAG 3.0 sono attualmente in fase di sviluppo e promettono di essere ancora più esaustive. Tra gli altri miglioramenti, è prevista l'introduzione di linee guida più dettagliate per il contrasto dei colori.

Scopri di più sulle WCAG 2.1

Accessibilità per #693EFE

Simulazioni di colore per #693EFE

Protanopia

Deuteranopia

Tritanopia

Acromatopsia