Generatore di Palette di Colori
Genera palette complementari, analoghe, triadiche e monocromatiche a partire da un colore base — clicca su qualsiasi campione per copiarne l'hex.
1.203 visualizzazioni
Come Funziona
La teoria del colore definisce le regole di armonia come relazioni angolari fisse tra le tonalità su una ruota dei colori. Questo strumento le calcola nel modello HSL (Hue, Saturation, Lightness — Tonalità, Saturazione, Luminosità) piuttosto che in RGB, perché la Tonalità è un valore naturale da 0 a 360° su un cerchio — aggiungere un angolo per trovare un colore correlato è aritmetica diretta. In RGB, i colori sono semplicemente tre canali di intensità senza alcuna nozione intrinseca di "angolo", quindi la stessa matematica dell'armonia richiederebbe comunque una conversione interna in HSL; questo strumento lavora semplicemente nello spazio in cui la matematica è nativa.
Dalla Tonalità del tuo colore base, vengono derivati: il complementare (l'unica tonalità direttamente opposta, base + 180°, per il massimo contrasto), il triadico (tre tonalità distribuite uniformemente sulla ruota a intervalli di 120°, vivaci ma bilanciate), l'analogo (tonalità vicine a ±30°, che risultano calme e coese perché sono vicine tra loro), il complementare diviso (le due tonalità che affiancano il complementare, a ±150°, offrendo contrasto con meno tensione rispetto a una coppia complementare pura), e una scala monocromatica che mantiene fisse Tonalità e Saturazione mentre fa variare la Luminosità verso l'alto e verso il basso. Ad esempio, una tonalità base di 200° (un blu) produce una tonalità complementare di 20° (un arancione) e tonalità triadiche a 320° e 80°.
Cosa Dovresti Sapere
- Una ricetta pratica del 60-30-10: usa il colore base per circa il 60% del design, un tono analogo per il 30% e il complementare come accento del 10% — pulsanti, link, punti salienti.
- L'armonia non è accessibilità. Il fatto che due tonalità siano matematicamente correlate sulla ruota non dice nulla sul loro contrasto di luminosità; verifica separatamente le combinazioni testo-su-colore rispetto alle WCAG.
- Clicca su qualsiasi campione per copiare il suo codice hex direttamente negli appunti.
- Saturazione e Luminosità contano ancora enormemente. Due palette possono condividere esattamente lo stesso insieme di tonalità ma apparire completamente diverse nell'atmosfera — una versione a bassa saturazione e alta luminosità risulta morbida e pastello, mentre le stesse tonalità a piena saturazione e bassa luminosità risultano audaci e drammatiche.
- Le associazioni culturali non seguono la ruota. Il partner d'armonia matematicamente "corretto" di una tonalità non dice nulla su cosa segnali quel colore in una determinata regione o settore — il rosso può apparire come allarme in un contesto e come festa in un altro, indipendentemente da qualsiasi regola di armonia.
Un rapido esempio pratico: scegli #3B82F6 (un blu medio, circa 217° di tonalità) come base. Il complementare si colloca vicino a 37° di tonalità, un arancione caldo — un abbinamento naturale per un pulsante primario contro un'interfaccia dominata dal blu. L'insieme triadico aggiunge tonalità vicine a 97° (un verde-giallo) e 337° (un magenta-rosa), utili quando un design ha bisogno di tre colori d'accento distinti ma bilanciati, come le etichette di categoria o le serie di dati di un grafico.
Domande Frequenti
Quale armonia dovrei scegliere?
Le palette analoghe risultano calme e coese poiché le tonalità sono vicine tra loro sulla ruota; il complementare offre il massimo contrasto per le call-to-action; il triadico è vivace ma bilanciato. Il monocromatico è la scelta più sicura per le interfacce — una sola tonalità, diversi livelli di luminosità, garantita per risultare unificata anche se non hai fiducia nel mescolare più tonalità da solo.
Perché la tonalità viene calcolata in HSL invece che direttamente in RGB?
HSL rappresenta la Tonalità come un singolo angolo (0–360°) su un cerchio, quindi "ruota di 180° per trovare il complementare" è un'addizione a un solo passaggio. RGB non ha un concetto nativo di angolo — i suoi tre canali (rosso, verde, blu) non si mappano in modo pulito su una ruota, quindi calcolare l'armonia direttamente in RGB richiederebbe una matematica molto più complessa per lo stesso risultato, convertendo comunque internamente avanti e indietro.
Qual è la differenza tra complementare e complementare diviso?
Il complementare usa l'unica tonalità esattamente a 180° di distanza — massimo contrasto, ma può risultare visivamente teso se usato in quantità uguali. Il complementare diviso usa le due tonalità su entrambi i lati di quel punto (±150° dalla base), mantenendo un forte contrasto pur risultando leggermente più morbido e più facile da bilanciare, motivo per cui molte palette di loghi e brand si affidano ad esso invece che a una coppia complementare pura.
Come copio un colore?
Clicca sul campione — il suo codice hex viene copiato istantaneamente negli appunti e appare una conferma, pronto per essere incollato direttamente in CSS, in uno strumento di design o nel codice.
Le palette generate sono accessibili per il testo?
Non automaticamente. L'armonia descrive le relazioni tra tonalità, non il contrasto di luminosità — due colori armoniosi possono comunque fallire in leggibilità quando uno è il testo e l'altro lo sfondo, specialmente due tonalità di tono medio con luminosità simile. Per il testo su un colore, verifica un rapporto di contrasto WCAG di almeno 4,5:1 (3:1 per il testo grande) con un controllo del contrasto dedicato prima di pubblicare.
Strumenti Simili
Segnala un Problema
Generatore di Palette di Colori
Commenti
Ancora nessun commento — scrivi il primo!