Generatore colori Tailwind
Crea una scala Tailwind 50-950 da un colore brand.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona il generatore scala Tailwind
Tailwind CSS si aspetta una scala di 11 step nominati 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Ogni step rappresenta una gradazione di luminosità del colore base, dal più chiaro (50) al più scuro (950).
Lo strumento prende il tuo colore brand — solitamente lo step 500 o 600 — e calcola automaticamente gli altri step interpolando in spazio colore OKLCH per distribuzioni percettivamente uniformi. Il risultato è molto più preciso di un semplice calcolo HSL perché OKLCH tiene conto di come l'occhio percepisce le variazioni di luminosità tra hue diversi.
L'output è pronto da incollare nel tailwind.config.js sotto la chiave colors. Puoi rinominare il colore (es. brand, primary, teal) prima di copiare. Ogni step viene anche mostrato con il suo valore HEX e RGB, così puoi usarlo fuori da Tailwind se serve.
Un dettaglio importante: lo step 50 deve essere leggibile come sfondo di card su sfondo bianco (serve un minimo di contrasto visibile), e lo step 900 deve superare 4.5:1 di contrasto su bianco per funzionare come testo. Lo strumento segnala se questi requisiti non sono soddisfatti.
Esempi pratici
- Nuova installazione Tailwind: hai il hex del brand dal brief, ti serve la scala completa. Incolla il hex, copia il blocco config, incolla in
tailwind.config.js. Fatto. - Aggiornamento da Tailwind v2 a v3: la palette predefinita è cambiata; se avevi colori custom, rigenera la scala dal brand color originale per mantenere coerenza.
- Shadcn/ui: il sistema di componenti shadcn usa variabili CSS, ma la scala Tailwind è la base. Genera la scala e poi mappa gli step nelle variabili --primary, --secondary ecc.
- Verifica accessibilità: controlla che lo step 700 o superiore superi 4.5:1 su bianco prima di usarlo come colore testo nei componenti.
FAQ — Scala colori Tailwind
Quale step devo usare come colore principale dei bottoni?
Lo step 600 è spesso il punto di partenza ottimale: abbastanza saturo da essere visibile, abbastanza scuro da passare il contrasto 4.5:1 con testo bianco per la maggior parte degli hue. Verifica sempre con il controllo WCAG — blu e viola tendono a funzionare, verde lime e giallo quasi mai.
Posso aggiungere step extra (es. 550) alla scala?
Tecnicamente sì, ma Tailwind non li genera di default e rompono le aspettative di chi legge il codice. È meglio usare lo step esistente più vicino e regolare con opacità (es. bg-blue-600/80) o usare un colore arbitrario (bg-[#valor]) per casi isolati.
La scala generata funziona con Tailwind v4?
Tailwind v4 cambia la configurazione verso CSS-first con @theme. La scala di colori rimane concettualmente la stessa, ma invece di tailwind.config.js la definisci con variabili CSS. Chromaforge esporta anche le custom properties CSS, che si mappano direttamente in questa nuova sintassi.
Come gestisco più brand color nello stesso progetto?
Genera una scala per ogni colore brand e rinominale (es. primary, secondary, accent). In Tailwind avrai classi come bg-primary-500 e bg-secondary-200, molto più semantiche di bg-blue-500 e bg-teal-200.