Generatore di tavolozze di colori
- I file non lasciano il dispositivo
- Funziona nel browser
- Gratis, senza account, senza filigrana
3b82f6
e24956
3ba01b
Come usare Generatore di tavolozze di colori
Crea tavolozze di colori in tre modi: regole di armonia da un colore base, tavolozze casuali che puoi bloccare e rigenerare, oppure una scala di 11 tonalità da 50 a 950 come quella di Tailwind. I colori sono calcolati in OKLCH e ogni tavolozza si esporta in CSS, Tailwind v3 o v4, JSON, .gpl o .ase.
- 1
Scegli una Modalità: Armonia, Casuale o Tonalità.
- 2
Per Armonia o Tonalità, imposta il Colore base, poi scegli una Regola, oppure un Nome del colore e il gradino su cui Tenere la base.
- 3
Per Casuale, fai clic su Genera o premi Spazio e blocca i colori che vuoi tenere prima di generare di nuovo.
- 4
Passa su un colore e fai clic sull'icona di copia; in Armonia puoi anche renderlo il nuovo colore base.
- 5
Sotto Esporta, scegli HEX, CSS, Tailwind v3, Tailwind v4 o JSON e copia il codice, oppure scarica .gpl o .ase.
Domande frequenti
Perché le armonie vengono calcolate in OKLCH?
Le tinte vengono ruotate in OKLCH, così ogni colore conserva la luminosità percepita e la vividezza del colore base. Ruotare in HSL farebbe sembrare i gialli molto più chiari dei blu.
Come vengono costruite le tonalità da 50 a 950?
La luminosità segue una curva vicina alle tavolozze di Tailwind e la croma ha un picco intorno a 500–600. Il colore base viene tenuto esattamente al suo gradino; Automatico sceglie il gradino più vicino alla sua luminosità.
Posso tornare a una tavolozza casuale precedente?
Sì. Usa Tavolozza precedente e Tavolozza successiva; le ultime 50 tavolozze restano finché la pagina è aperta, ma non viene salvato nulla dopo la chiusura.
Quanti colori può avere una tavolozza?
Le tavolozze casuali hanno da 2 a 10 colori (usa i pulsanti − e +). Le regole di armonia danno un numero fisso, per esempio 2 per la complementare e 5 per l'analoga o la monocromatica, e Tonalità ne dà sempre 11.
Che aspetto ha l'esportazione Tailwind v4?
Un blocco @theme di variabili --color-*, pronto da incollare nel CSS. Le tonalità sono scritte come valori oklch() con nomi come --color-brand-500; le altre modalità usano HEX.