Generatore di palette di colori
Parti dal colore del tuo brand e ottieni una scala completa da 50 a 950, percettivamente uniforme e pronta per il tuo design system, insieme a combinazioni armoniche. Il colore originale resta identico nel passo corrispondente.
Elaborato al 100% nel tuo browser
Come posso verificarlo?
I tuoi file non vengono mai caricati: sono elaborati sul tuo dispositivo. Verifica tu stesso: carica la pagina, spegni il Wi-Fi e lo strumento continua a funzionare. Oppure apri gli strumenti per sviluppatori del browser (F12), scheda «Rete»: nessun file lascia il tuo dispositivo.
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Scrivi il colore base in qualsiasi formato o premi «Casuale» per ispirarti.
- 2Dai un nome alla palette (ad esempio «brand» o «primary»).
- 3Scegli un’armonia per vedere i colori che si abbinano alla base.
- 4Esporta la scala come variabili CSS, Tailwind, SCSS o JSON, oppure fai clic su una tonalità per copiarla.
Casi d’uso
- Creare la scala colori di un design system o di un tema Tailwind CSS.
- Generare stati hover, sfondi tenui e bordi da un unico colore del brand.
- Trovare colori secondari e d’accento abbinati.
- Condividere una palette con il team tramite un link.
Domande frequenti
Perché la scala è calcolata in OKLCH e non in HSL?
In HSL un giallo e un blu con la stessa «luminosità» appaiono molto diversi. OKLCH è percettivo: ogni passo ha la stessa chiarezza apparente qualunque sia la tonalità, come nelle palette di Tailwind CSS v4.
Cosa significano i numeri da 50 a 950?
È la convenzione dei design system moderni: 50 è la tonalità più chiara (sfondi), 500–600 sono di solito le principali (pulsanti) e 900–950 le più scure (testo).
Il mio colore originale compare nella palette?
Sì. Viene posizionato esattamente nel passo con la luminosità più simile, segnato da un punto, e le altre tonalità vengono generate attorno con la stessa tinta.
Come uso la palette in Tailwind CSS?
Con Tailwind v4 incolla il blocco @theme nel tuo CSS; con Tailwind v3 aggiungi l’oggetto a theme.extend.colors in tailwind.config.js. Poi usa classi come bg-brand-500 o text-brand-900.