Generatore di sfumature Tailwind
Genera una scala di 11 sfumature in stile Tailwind (50-950) da un colore HEX di base, con variabili CSS e JSON pronti da copiare.
🔒 Funziona interamente nel tuo browser — nulla viene caricatoCrea una scala di sfumature pratica
Un solo colore del brand raramente basta per un'interfaccia completa. I pulsanti hanno bisogno di stati hover, le card di sfondi chiari, i bordi di una tinta più discreta e il testo a volte di un compagno più scuro. Questo generatore di sfumature Tailwind trasforma un valore HEX in una scala 50-950 familiare, così puoi esplorare rapidamente come si comporta quel colore su superfici chiare e scure. I valori generati sono deterministici e facili da copiare, quindi utili per prototipi, revisioni di design, proprietà personalizzate CSS e documentazione dei design token.
Lo strumento usa passaggi di luminosità HSL per mantenere riconoscibile la tonalità, spingendo il colore verso tinte molto chiare e sfumature profonde. Non è un algoritmo ufficiale di Tailwind e non cerca di replicare esattamente le palette calibrate a mano di Tailwind. Offre invece un punto di partenza pulito da rifinire nel contesto. Se il colore di base è già molto chiaro o molto scuro, osserva con attenzione i valori centrali e valuta se la scala richiede ritocchi manuali.
Usare le sfumature generate nel CSS
Copia l'output CSS quando vuoi variabili pronte per il browser come --brand-500 e --brand-700. Copia l'output JSON quando prepari i token per un file di configurazione, uno style dictionary o una pagina di documentazione. In un'interfaccia tipica, 50 e 100 funzionano bene per superfici morbide, 200 e 300 per bordi o badge, 500 per il colore principale delle azioni e dal 600 all'800 per stati hover, premuto o testo. I valori 900 e 950 sono i più intensi, quindi riservali a temi scuri o a elementi di forte enfasi.
Controlla il contrasto prima di pubblicare
Le scale di sfumature sono comode, ma non garantiscono automaticamente testo accessibile. Un colore che appare equilibrato come campione può non superare il contrasto dietro piccole etichette o controlli disabilitati. Dopo aver copiato una scala, verifica le combinazioni che la tua interfaccia usa davvero: testo primario su sfondi chiari, testo bianco sui pulsanti d'azione, anelli di focus attorno agli input e bordi rispetto alle superfici vicine. Considera questo generatore come una prima bozza nel flusso di lavoro di un sistema colore, poi verifica gli abbinamenti finali con un verificatore di contrasto prima di pubblicare.
Come usare
- Scegli una baseSeleziona il colore del brand o di accento che deve ancorare la scala.
- Controlla la scalaEsamina ogni campione da 50 a 950 e verifica che gli estremi chiaro e scuro siano utili.
- Copia i tokenCopia la scala come proprietà personalizzate CSS o come JSON per il tuo progetto.