Generatore di Armonie di Colore

Cos'è l'armonia dei colori?

L'armonia dei colori è l'arte di scegliere palette le cui tonalità sembrino intenzionali piuttosto che casuali, e dietro l'arte c'è una semplice geometria. La ruota dei colori dispone le tonalità in cerchio in base alla loro posizione nello spettro visibile; le palette armoniose sono insiemi di punti su quel cerchio i cui angoli relativi producono relazioni visive affidabili. Le coppie complementari (opposte tra loro) massimizzano contrasto ed energia. Gli insiemi analoghi (vicini tra loro) appaiono calmi e uniformi. I trii triadici sono vivaci ma equilibrati. Ogni schema è una formula collaudata, non una regola rigida: ti danno un punto di partenza che puoi poi affinare.

Come usare questo generatore

Scegli un colore di base e seleziona uno schema. La griglia qui sotto mostra ogni colore dell'armonia, con i valori esadecimale, RGB e HSL. Clicca su una qualsiasi card per copiarne l'esadecimale; clicca Copia sotto al blocco di codice per ottenere una dichiarazione :root di proprietà personalizzate CSS pronta da incollare. Cambia schema per confrontare: la stessa tonalità di base produce atmosfere completamente diverse attraverso relazioni geometriche differenti.

Scegliere lo schema giusto per ogni progetto

Complementare funziona per call-to-action e sistemi di avviso, dove il contrasto è il punto chiave. Analoga è imbattibile per gradienti hero, mood pieces e brand dal feeling naturale. Triadica è ottima per UI di prodotti per bambini, brand del gaming e infografiche con tre gruppi categoriali. Tetradica e quadrata ti danno quattro colori ma possono entrare in conflitto se usati tutti con lo stesso peso: scegli un dominante, un accento e usa gli altri due con parsimonia. Le palette monocromatiche si abbinano splendidamente a un neutro forte e non sembrano mai datate.

I calcoli: rotazione della tonalità

Ogni schema è una rotazione attorno all'anello delle tonalità HSL, lasciando saturazione e luminosità invariate rispetto al colore di base. complementary è (h + 180°). split-complementary prende la base più (h + 150°) e (h + 210°): un'alternativa più morbida al complementare puro. analogous è (h − 30°, h, h + 30°). triadic è (h, h + 120°, h + 240°). tetradic è il rettangolo a (h, h + 60°, h + 180°, h + 240°). square distribuisce quattro punti in modo uniforme: (h, h + 90°, h + 180°, h + 270°). monochromatic mantiene la tonalità e varia la luminosità in cinque passaggi equispaziati.

Cheat sheet: schema e atmosfera

Complementare: energica, accattivante, polarizzante. Complementare divisa: audace ma più morbida del complementare pieno; ottima per chi crea palette per la prima volta. Analoga: calma, armoniosa, ideale per brand di natura e benessere. Triadica: giocosa, equilibrata, vibrante. Tetradica: versatile, ricca, richiede un colore dominante. Quadrata: audace ed equilibrata; più difficile da gestire della tetradica. Monocromatica: minimale, sofisticata, accessibile se abbinata a un neutro.

Domande frequenti

Come scelgo un colore di base?

Inizia dalla tonalità più usata del brand oppure, se parti da zero, scegli un colore la cui atmosfera rispecchi il brand: gialli e arancioni caldi per qualcosa di energico, blu e teal freddi per qualcosa di affidabile, rossi profondi per il serio, verdi per il naturale. Lo schema poi propaga quell'atmosfera negli slot secondari.

Perché in modalità monocromatica i miei colori sembrano slavati?

La modalità monocromatica varia la luminosità mantenendo fisse tonalità e saturazione. Se il tuo colore di base ha bassa saturazione, le varianti più chiare e più scure tendono a comprimersi verso il grigio. Per palette monocromatiche più ricche, parti da una base saturata e considera di modificare la saturazione insieme alla luminosità in un'app di pittura.

Devo usare i quattro colori di una palette tetradica con lo stesso peso?

Quasi mai. Usa la regola del 60-30-10-10: 60% colore dominante, 30% secondario, 10% e 10% per i due accenti. Le palette a quattro colori con lo stesso peso risultano caotiche: dai i riflettori a un colore e ai restanti ruoli di supporto.

Questi schemi sono scientificamente accurati?

Sono definiti geometricamente, non calibrati percettivamente. La ruota dei colori HSL non riflette il modo in cui l'occhio umano percepisce le distanze tra tonalità: giallo e verde appaiono più vicini di quanto suggerisca il calcolo, mentre i verdi coprono una regione percettiva molto più ampia dei blu. Usa gli schemi come punti di partenza e regola a occhio.

Posso salvare la mia palette?

Clicca Copia sul blocco delle variabili CSS per mettere la palette negli appunti, poi incollala nel foglio di stile del tuo progetto. Non memorizziamo le palette lato server: tutto resta locale nel tuo browser.

Qual è la differenza tra complementare divisa e complementare?

La complementare pura usa due colori direttamente opposti sulla ruota: contrasto massimo ma visivamente intenso. La complementare divisa sostituisce il singolo opposto con due colori che lo affiancano (±30° dall'opposto), ammorbidendo il contrasto pur mantenendone l'energia. È lo schema più semplice da usare se non hai mai costruito una palette prima.

Generatore di Armonie di Colore