Crea palette di 5 colori coordinati usando teoria del colore reale (HSL): schemi analoghi, complementari, triadici, tetradici, monocromatici o random puro. Output in formato HEX, gradiente CSS pronto da copiare e CSS variables.
Uno strumento per chi progetta e ha bisogno, subito, di cinque colori che stanno bene insieme. Il generatore costruisce palette coordinate seguendo le regole della ruota cromatica — schemi analoghi, complementari, triadici, monocromatici o un gradiente CSS pronto — e restituisce i codici HEX e RGB da incollare nel tuo lavoro. Utile a web designer, grafici, illustratori e a chi cura un brand, quando serve una base armonica affidabile senza partire dal foglio bianco. Ogni combinazione nasce da un punto di partenza scelto a caso, così non ottieni mai due volte lo stesso schema.
Scegli uno schema (analoghi, complementari, triadici, monocromatici o gradiente) e lo strumento costruisce cinque colori coordinati applicando le regole della ruota cromatica all'angolo di tonalità. A ogni generazione la tonalità di partenza viene estratta a caso, poi lo schema decide come distribuire gli altri quattro colori intorno a essa: a 120 gradi per i triadici, agli antipodi per i complementari, e così via.
La casualità è di qualità: viene usato un generatore crittografico (random_int in PHP, che attinge a una fonte CSPRNG del sistema operativo) e non il classico rand pseudo-casuale. Il risultato è che le palette non cadono in cicli prevedibili tra una generazione e l'altra, e due utenti diversi non partono quasi mai dalla stessa tonalità.
Per ogni colore ottieni i valori nei formati che servono davvero: codice esadecimale (#RRGGBB) e RGB. Per lo schema a gradiente ricevi in più la stringa CSS già pronta, del tipo linear-gradient(...), da incollare nella proprietà background. Puoi rigenerare quante volte vuoi finché la combinazione non ti convince.
Definisci l'identità di un marchio partendo da un colore primario e ricavando i secondari coordinati: per esempio un blu istituzionale con i suoi accenti analoghi per icone e pulsanti.
Componi la palette di una dashboard: uno o due colori d'azione complementari per i bottoni e una scala monocromatica di grigi-azzurri per sfondi, bordi e stati disabilitati.
Blocchi una gamma armonica prima di disegnare, così ombre e luci restano coerenti; comodo per illustrazioni piatte, poster o infografiche.
Copi il codice di un gradiente lineare pronto da incollare nel foglio di stile, per esempio uno sfondo hero che passa da viola a rosa senza definire a mano ogni stop.
Uno schema triadico o analogo dà categorie distinguibili ma coese per le serie di un grafico a barre o a torta, evitando accostamenti stridenti.
Esplori accostamenti per una stanza o una presentazione: parti da una tonalità per le pareti e ottieni gli abbinamenti per tessuti, arredi e dettagli.
Ogni schema armonico nasce da una regola geometrica sulla ruota cromatica, che divide i 360 gradi della tonalità (l'H del modello HSL) in settori. I colori complementari stanno a 180 gradi l'uno dall'altro, i triadici a 120 gradi, gli analoghi entro una forbice di circa 30 gradi. Non è gusto arbitrario: è la stessa logica che Isaac Newton formalizzò disponendo lo spettro in cerchio nell'Opticks del 1704.
La scelta dello spazio colore conta. Ragionare in HSL (tonalità, saturazione, luminosità) permette di ruotare l'angolo H tenendo fissi gli altri due valori, così i colori risultano percepiti come coerenti. Uno schema monocromatico, per esempio, tiene ferma la tonalità H e fa variare saturazione e luminosità, generando la classica scala di sfumature di uno stesso colore.
Un limite noto è che la ruota HSL non è percettivamente uniforme: due tonalità distanti 30 gradi nel verde appaiono più simili di due tonalità distanti 30 gradi tra il blu e il viola. Per questo il risultato va sempre verificato a occhio, soprattutto controllando il contrasto tra testo e sfondo secondo le soglie di leggibilità (il rapporto 4,5:1 delle linee guida WCAG per il testo normale).
Ogni colore mostra il suo codice esadecimale (#RRGGBB) e i valori RGB, che puoi incollare direttamente nel CSS, in Figma o in un software grafico. Per lo schema a gradiente viene fornita anche la regola CSS completa, pronta da inserire nella proprietà background.
I colori complementari stanno agli antipodi della ruota, a 180 gradi, e creano forte contrasto: sono ideali per far risaltare un elemento. Gli analoghi sono vicini tra loro, entro circa 30 gradi, e danno un effetto morbido e uniforme, adatto a sfondi e composizioni pacate.
I codici sono nel formato standard del web, quindi tecnicamente compatibili ovunque. L'armonia però non garantisce da sola la leggibilità: per il testo su sfondo verifica sempre il contrasto rispetto alle soglie WCAG (rapporto 4,5:1 per il testo normale) con un apposito controllo.
Cinque è un buon compromesso: bastano a coprire primario, secondari e accenti di un'identità visiva senza disperdersi. Nella pratica del design conviene comunque usarne pochi in modo dominante, tenendo gli altri come dettaglio.
Sì: il punto di partenza viene scelto con un generatore crittografico, quindi ogni volta ottieni una combinazione nuova e imprevedibile. Se una palette ti piace, salva subito i codici, perché rigenerando avrai colori differenti.
Certo: i colori sono semplici valori numerici e non sono soggetti a diritti d'autore, quindi puoi usarli liberamente per loghi, siti, prodotti e materiali di marketing. Le eventuali tutele riguardano il marchio nel suo insieme, non le singole tonalità.