Come usare

1. Clicca ovunque sulla ruota cromatica per scegliere un colore, oppure regola i cursori di tonalità, saturazione e luminosità.
2. Visualizza il colore selezionato in formato HEX, RGB e HSL sotto la ruota.
3. Clicca su un campione di armonia per vedere gli schemi complementari, analoghi, triadici e complementari divisi.

Domande frequenti

Cos'è un'armonia di colori?

L'armonia di colori si riferisce a una disposizione gradevole di colori basata sulla loro posizione sulla ruota cromatica. Le armonie comuni includono colori complementari (opposti), analoghi (adiacenti) e triadici (equidistanti).

Qual è la differenza tra HEX, RGB e HSL?

HEX è un codice esadecimale a 6 cifre (#RRGGBB). RGB usa i valori di rosso, verde e blu (0-255). HSL usa tonalità (0-360°), saturazione (0-100%) e luminosità (0-100%).

Posso usare questi colori nei miei design?

Sì! Copia qualsiasi valore di colore e incollalo direttamente nel tuo CSS, software di design o applicazione web. Tutti i valori sono conformi agli standard e ampiamente supportati.

Una breve storia della ruota dei colori

Isaac Newton disegnò la prima. In Opticks (1704) riportò gli esperimenti con il prisma che aveva mostrato per la prima volta alla Royal Society nel 1672, dimostrando che la luce bianca è una miscela di colori spettrali, e dispose lo spettro in un cerchio chiuso così che l'estremità rossa potesse incontrare quella violetta. Diede il nome a sette colori (rosso, arancione, giallo, verde, blu, indaco, violetto) scelti per analogia con le sette note della scala musicale diatonica, poiché credeva che il colore e l'armonia condividessero una struttura matematica. L'indaco come banda separata dal blu è la vittima più famosa di quella scelta estetica.

La Teoria dei colori di Goethe (1810) riformulò la ruota attorno alla percezione anziché alla fisica. Dispose i colori simmetricamente in metà calde «plus» e fredde «minus» e notò che i colori opposti «si evocano reciprocamente nell'occhio», una prima articolazione della teoria del processo dell'opponente che anticipava la legge del contrasto simultaneo che Michel Eugène Chevreul avrebbe pubblicato nel 1839 dalla manifattura di arazzi dei Gobelins.

A Color Notation di Albert Munsell (1905) fu la prima ruota fondata sulla percezione umana misurata anziché sulla convenzione, separando tinta, valore (luminosità) e croma (saturazione) in dimensioni indipendenti, l'antenata diretta di ogni spazio colore percettivo moderno, compresi CIELAB e OKLCH. La ruota che alla maggior parte dei designer è stata insegnata a scuola è più giovane: Johannes Itten codificò la ruota RYB a 12 colori al Bauhaus tra il 1919 e il 1922, identificando tre primari (rosso, giallo, blu), tre secondari, sei terziari e sette tipi di contrasto cromatico. Le ruote effettivamente usate sullo schermo sono ancora diverse: HSL e HSV sono riparametrizzazioni cilindriche dell'RGB inventate al PARC e in altri laboratori di grafica negli anni '70, così che un designer potesse ragionare con tre cursori intuitivi («questa tinta, più vivace, più chiara») anziché con tre opachi canali RGB. Il passo più recente è OKLCH (Björn Ottosson, dicembre 2020), ora nel CSS Color Module Level 4, una ruota dove passi angolari uguali appaiono come passi di tinta percettivi uguali.

Tre famiglie di ruota

«Ruota dei colori» nasconde il fatto che ce ne sono tre tipi diversi, ciascuno corretto per una diversa situazione fisica:

• RYB (rosso, giallo, blu), la ruota didattica artistica che Itten rese popolare. È una convenzione basata sull'esperienza con i pigmenti, non un modello della fisica. Nessuna combinazione di pitture rosse, gialle e blu può mescolare ogni colore visibile.
• RGB (rosso, verde, blu) (additivo. Usato ovunque il colore venga emesso: monitor, telefoni, proiettori, luci da palco. Ancorato alla fisiologia) le retine umane hanno tre tipi di cono sensibili alle lunghezze d'onda lunghe, medie e corte. I browser e il CSS lavorano in RGB, quindi la ruota HSL di questo strumento è una riparametrizzazione polare di sRGB.
• CMY / CMYK (ciano, magenta, giallo + key/nero), sottrattivo. Usato ovunque il colore venga riflesso: stampa, inchiostro, colorante. Mescolare diminuisce la luminosità; le stampanti commerciali aggiungono il nero per i neri veri e per risparmiare inchiostro.

La conseguenza pratica: i valori HEX, RGB e HSL esportati da questa ruota sono accurati per lo schermo. Non sono accurati per la pittura, e una tiratura di stampa CMYK avrà bisogno della propria conversione, un passaggio che le tipografie di solito gestiscono per te.

Come l'HSL si mappa su un cerchio

HSL sta per tinta, saturazione, luminosità (in inglese hue, saturation, lightness). La tinta è un angolo attorno a un asse centrale con il rosso a 0°, il verde a 120°, il blu a 240°, che torna al rosso a 360°. La saturazione va da 0% (grigio) a 100% (pienamente vivace). La luminosità va da 0% (nero) attraverso la tinta naturale al 50% fino al bianco al 100%. Geometricamente il modello è un bicono (due coni punta a punta) con i colori più saturi all'equatore. L'HSV è simile ma usa il Valore al posto della Luminosità, con i colori pienamente saturi a V=100 e l'intero modello a forma di un singolo cono.

La funzione hsl() del CSS prende gli stessi tre numeri. La sintassi moderna è separata da spazi con un alfa facoltativo dopo una barra:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

La vecchia forma separata da virgole hsl(210, 80%, 50%) e l'alias hsla() sono ancora supportati per retrocompatibilità. Il CSS Color Module Level 4 è ampiamente disponibile nei browser da circa il 2015 per l'HSL di base, con la sintassi moderna arrivata più tardi.

Avvertenza onesta: l'HSL non è percettivamente uniforme. Un giallo a L=50% appare molto più luminoso di un blu a L=50% anche se entrambi hanno lo stesso numero di luminosità, e una ruota suddivisa per tinta a S e L costanti avrà gialli visivamente pesanti e blu deboli. Per la visualizzazione dei dati e le palette di marchio attentamente calibrate, il nuovo spazio colore oklch() è una scelta migliore, passi angolari uguali appaiono come passi di tinta percettivi uguali. Per scegliere un colore e prendere un HEX, l'HSL va bene.

Le armonie classiche, con la matematica

Ogni schema di armonia è definito da un insieme di scostamenti angolari da una tinta di base. Sia B la tinta che hai selezionato:

Schema	Tinte	Atmosfera
Monocromatico	B (varia solo S e L)	Sottile, a basso contrasto, tranquillo
Analogo	B − 30°, B, B + 30°	Ricco, armonioso, tramonti, fogliame
Complementare	B, B + 180°	Dinamico, che cattura l'attenzione
Complementare frazionato	B, B + 150°, B + 210°	Contrasto forte ma più morbido del complementare puro
Triadico	B, B + 120°, B + 240°	Contrasto netto con equilibrio e ricchezza
Tetradico (rettangolare)	B, B + 60°, B + 180°, B + 240°	Due coppie complementari, lascia che una domini
Quadrato	B, B + 90°, B + 180°, B + 270°	Suddivisione uniforme in quattro, l'equilibrio è più difficile

Questi angoli sono convenzioni didattiche ereditate da Goethe e Itten, non leggi psicofisiche. Producono in modo affidabile contrasto ed equilibrio, motivo per cui i designer vi ricorrono, ma sono euristiche anziché regole. Tratta i campioni di armonia qui sopra come punti di partenza da cui iterare.

Quando ricorreresti a una ruota

• Web e design dell'interfaccia. Scegli un colore primario del marchio, ricava un complementare per l'accento di pericolo / invito all'azione, ricava un terzo triadico per i grafici. Poi verifica il contrasto rispetto allo sfondo e al testo.
• Identità del marchio. Un colore del logo più una palette documentata di armonie per i materiali di marketing.
• Visualizzazione dei dati. Palette categoriche (più di 10 tinte distinte a uguale distanza percettiva) e scale sequenziali o divergenti, fatte meglio in OKLCH che in HSL una volta superate le tre o quattro serie.
• Design d'interni. Un colore di base per le pareti, una rifinitura analoga, un accento complementare nei cuscini o nelle opere d'arte.
• Color grading fotografico. Il verde acqua e arancione (una coppia complementare) è il cliché del cinema moderno perché i toni caldi della pelle contro le ombre fredde si leggono come cinematografici.
• Arte di gioco e illustrazione. Distinguere i personaggi dagli ambienti tramite la tinta, con accenti complementari per i punti focali.

Il daltonismo e la ruota

All'incirca l'8% degli uomini e lo 0,5% delle donne di origine nordeuropea ha qualche forma di deficit della visione dei colori (il tasso varia a seconda della popolazione). I geni dei coni L e M si trovano sul cromosoma X, motivo per cui la condizione è molto più comune negli uomini. Diverse armonie (in particolare le coppie complementari rosso/verde) si riducono a quasi monocromatiche per le forme più comuni:

• Deuteranopia / deuteranomalia: coni a lunghezza d'onda media non funzionanti o deboli. La forma più comune (circa il 6% degli uomini). Rosso e verde vengono confusi.
• Protanopia / protanomalia: coni a lunghezza d'onda lunga non funzionanti o deboli (circa il 2% degli uomini). I rossi appaiono attenuati, a volte confusi con il nero.
• Tritanopia / tritanomalia: coni a lunghezza d'onda corta non funzionanti o deboli. Molto rara. Blu e gialli vengono confusi.

Il principio «non affidarti al solo colore» delle WCAG 2.1 è direttamente rilevante: non usare mai il colore come unico portatore di informazione. Aggiungi il contrasto di luminosità oltre al contrasto di tinta, usa motivi o forme insieme al colore nei grafici, e fai passare qualsiasi armonia che generi attraverso un simulatore di daltonismo prima di confermarla. Verifica anche il contrasto WCAG, minimo 4,5:1 per il testo normale al livello AA, 7:1 al livello AAA.

Altre domande

Perché il rosso, il giallo e il blu sono chiamati colori «primari»?

Nella tradizione artistica / RYB (la ruota che Itten insegnava al Bauhaus) sono i tre pigmenti da cui si presumeva che tutti gli altri fossero mescolabili. Quel presupposto è una convenzione anziché fisica: nessuna combinazione di pigmenti reali rosso, giallo e blu può mescolare ogni colore visibile. Nella luce additiva i veri primari sono il rosso, il verde e il blu (RGB); nella stampa sottrattiva sono il ciano, il magenta e il giallo (CMY). RYB persiste nell'educazione artistica perché è pedagogicamente semplice e dà risultati ragionevoli quando si mescolano pitture del mondo reale.

16:9 è la stessa cosa del rapporto aureo per il colore?

No, sono due concetti non correlati. Il «rapporto aureo» emerge nella proporzione (rettangoli, layout) ed è uguale a circa 1,618. Le armonie della teoria del colore derivano dalla geometria angolare sul cerchio delle tinte: 180° per il complementare, 120° per il triadico, 90° per il quadrato. Non c'è alcuna armonia del rapporto aureo incorporata nell'insegnamento standard della ruota dei colori.

I colori che vedo qui corrisponderanno a ciò che viene stampato?

Quasi certamente non esattamente. Questa ruota è HSL sopra sRGB, colore additivo, progettata per gli schermi. La stampa è CMYK sottrattivo. I blu vivaci e i verdi brillanti che appaiono bene su un monitor spesso si desaturano drasticamente sulla carta, e le conversioni fuori gamma possono spostare le tinte. I designer per la stampa di solito tengono davanti a sé una prova calibrata o lavorano direttamente in CMYK nello strumento di design. Usa questa ruota per il mockup su schermo, poi converti.

La «psicologia del colore» (rosso = passione, blu = calma) è basata su prove reali?

Ha una forza popolare ma un supporto empirico debole e culturalmente variabile. Culture diverse associano gli stessi colori a idee molto diverse (il bianco è un colore da matrimonio nell'Europa occidentale e un colore da lutto in alcune parti dell'Asia orientale). Usa la psicologia del colore come punto di partenza per il design e come vocabolario per parlare con i clienti, non come una legge.

Viene inviato qualcosa a un server?

No. La ruota viene resa in un canvas HTML5; gli angoli di armonia sono calcolati localmente in JavaScript; le stringhe HEX, RGB e HSL vengono scritte nei tuoi appunti tramite l'API del browser. La pagina funziona offline una volta caricata.

Strumenti correlati