colorize
ColorKit
CK

Generatore di Colori Tailwind CSS

Inserisci il colore principale del tuo brand per ottenere una scala cromatica 50-950 bilanciata per Tailwind CSS v3 o v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

Come funzionano le sfumature di Tailwind

Tailwind CSS adotta una scala di luminosità da 50 a 950 per strutturare design system coerenti ed esteticamente bilanciati.

  • 50 - 100: Sfondi chiari e banner informativi.
  • 200 - 400: Bordi discreti ed elementi disattivati.
  • 500 - 600: Pulsanti principali e colore primario.
  • 700 - 950: Tipografia e pannelli ad alto contrasto in dark mode.
Knowledge Base & FAQ

Domande Frequenti (FAQ)

Risposte dirette e soluzioni a dubbi comuni, sfide tecniche e standard di settore.

Come calcola Tailwind CSS la sua scala di sfumature da 50 a 950?expand_more
La scala numerica di Tailwind ordina i colori dal più chiaro al più scuro:
  • 50–100: Tonalità pastello ad alta luminosità (~90%-95%) ideali per sfondi di card e avvisi.
  • 200–400: Mezzitoni per bordi, divisori e sfondi al passaggio del mouse.
  • 500–600: La tonalità base del brand (500) e il relativo hover (600) per i pulsanti principali.
  • 700–900: Tonalità scure per testo di lettura e superfici a contrasto in dark mode.
  • 950: Tonalità quasi nera (~5%-10% luminosità) per contenitori in modalità scura.
Come inserire sfumature personalizzate in Tailwind CSS v3 vs Tailwind CSS v4?expand_more
In Tailwind CSS v3 (configurazione JS): Aggiungi la scala generata in tailwind.config.js sotto theme.extend.colors: 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
In Tailwind CSS v4 (CSS puro): Dichiarale direttamente nel file CSS con la direttiva @theme: 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
Perché la semplice aggiunta di bianco o nero rende i colori spenti?expand_more
Aggiungere bianco o nero in modo lineare appiattisce la saturazione cromatica, provocando colori gessosi o farraginosi. Le palette professionali per Tailwind applicano la variazione di tonalità (hue shifting): schiarendosi, la tonalità vira verso la luce solare calda, mentre scurendosi vira verso le ombre fredde.
Quale gradazione di Tailwind conviene usare per titoli, paragrafi e bordi?expand_more
Linee guida per la gerarchia visiva:
  • Titoli (H1–H3): text-slate-900 o text-neutral-900 per massimo contrasto.
  • Corpo del testo: text-slate-700 o text-neutral-600 per una lettura confortevole.
  • Note e didascalie: text-slate-500.
  • Bordi di card e input: border-slate-200 (tema chiaro) e border-slate-800 (tema scuro).