Generatore di Palette Colori
Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
Aggiornato maggio 2026
Revisionato da Rafael Duarte
Colore base
Regola di armonia
Regolazione globale
Assegna ruoli
Trascina i colori → rilasciali su una card · trascina le card per scambiarle · per scegliere un colore qualsiasi
Primario
#197FE6
Secondario
#1461B8
Accento
#F59E0B
Sfondo
#FFFFFF
Superficie
#F5F7FA
Testo
#111827
Crea prodotti
che i tuoi utenti adorano
Il modo più rapido per lanciare il tuo prossimo progetto con un design system curato e componenti pronti per la produzione.
Palette popolari
Palette di brand
Come usare il generatore di palette colori
Un colore base, una regola di armonia, cinque colori pronti
1. Scegli il colore base
Apri il selettore cliccando sul quadratino oppure digita un codice esadecimale di 6 cifre, ad esempio 197FE6.
2. Seleziona l'armonia
Analoga, monocromatica, complementare, triadica o tetradica: le cinque tinte si ricalcolano all'istante.
3. Rifinisci ed esporta
Sposta i cursori di saturazione e luminosità, assegna i ruoli e copia le variabili CSS o il JSON, oppure scarica un PNG.
Cosa fa il generatore di palette
Regole della ruota dei colori applicate in automatico
Cinque armonie, cinque colori
Ogni regola produce sempre cinque tinte: abbastanza varietà per un'interfaccia, senza perdere coerenza.
Saturazione e luminosità globali
Due cursori agiscono su tutta la palette insieme, così la relazione tra le tinte resta intatta mentre la rendi più tenue o più scura.
Rigenera e cronologia
Rigenera sceglie una tinta base casuale mantenendo regola e cursori; la palette precedente finisce nella cronologia (ultime 10, finché la pagina resta aperta).
Ruoli da design system
Sei schede (primary, secondary, accent, background, surface, text) vengono compilate da sole; puoi trascinarci un colore o sceglierne uno con l'icona a matita.
Anteprima di un sito
Navbar, hero, card, barra promozionale e footer si colorano con i ruoli assegnati, per valutare la palette su una pagina vera.
20 palette pronte
Dieci temi famosi da editor (Dracula, Nord, Catppuccin…) e dieci palette ispirate a marchi noti (Spotify, Netflix, Google…), caricabili con un clic.
Esempi con la base #197FE6
Saturazione 80% e luminosità 50%, i valori del colore base
Quando serve una palette armoniosa
Dal logo al foglio di stile
Colori di un sito web o di un'app
Parti dal colore principale del brand, assegna i sei ruoli e incolla il blocco :root nel CSS del progetto.
Identità visiva da un logo
Prova armonie analoghe e complementari attorno al colore del logo per trovare tinte di supporto e un accento.
Tema scuro
Con l'armonia monocromatica e la luminosità bassa ottieni una scala di blu o grigi adatta a sfondi e superfici scure.
Design token
Il JSON esportato riporta ruolo, HEX, RGB e HSL di ogni colore: una base comoda per Style Dictionary o per un file di token.
Proposte al cliente
Scarica il PNG con le cinque tinte e i codici HEX e allegalo a un brief o a una presentazione.
Errori comuni con le palette
Perdere i ruoli assegnati a mano
Quando cambi colore base, regola o cursori, i ruoli vengono ricalcolati e le assegnazioni manuali si perdono. Prima definisci la palette, poi sistema i ruoli ed esporta.
Non controllare il contrasto del testo
Lo strumento non misura il contrasto: un ruolo text scelto a mano può risultare illeggibile sullo sfondo. Verifica che il testo normale raggiunga almeno 4,5:1 (WCAG AA).
Aspettarsi l'ordine dei campioni nell'export
CSS e JSON contengono i sei ruoli (--color-primary, --color-background…), non i cinque campioni in fila. Il PNG, invece, mostra proprio i cinque campioni.
Contare sulla cronologia per conservare il lavoro
La cronologia vive solo nella sessione: ricaricando la pagina sparisce. Copia CSS o JSON per salvare davvero una palette.
Perché usare questo generatore di palette colori
Le armonie partono da relazioni geometriche sulla ruota dei colori, quindi offrono un punto di partenza solido anche senza occhio da designer. I cursori globali spostano l'intera palette verso toni più accesi o più spenti senza rompere gli equilibri tra le tinte.
Il passaggio dalla teoria al codice è immediato: assegni i colori ai ruoli di un design system, li vedi applicati a una pagina di esempio ed esporti variabili CSS o JSON. Tutto avviene nel browser, senza account.
Domande frequenti
Parti dal colore del brand, scegli un'armonia (l'analoga è la più sobria, la complementare la più contrastata) e regola saturazione e luminosità. Poi assegna i ruoli primary, secondary, accent, background, surface e text e controlla l'anteprima del sito prima di esportare.
Riferimenti
Cosa sono i colori complementari e come si individuano sul cerchio cromatico.
Guida (in inglese) alle variabili CSS, il formato dell'export di questo strumento.
Come Google organizza i colori per ruolo (primary, secondary, surface), in inglese: la stessa logica delle schede dei ruoli.
Strumenti correlati
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore DESIGN.md Design Crea file DESIGN.md pronti per l'IA per Google Stitch, Claude Code, Cursor e Copilot — definisci colori, tipografia, spaziatura e componenti per strumenti AI.
- Selettore di Colore Design Selettore di colore gratuito — scegli qualsiasi colore visivamente e ottieni istantaneamente i codici HEX, RGB, HSL, HSV e CMYK. Sfumature, tinte, armonie e...
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
