ItalianoIT

Generatore di palette per Tailwind CSS – sfumature 50–950

Scegli un colore di base e un nome: ottieni tutte le sfumature da 50 a 950 e la configurazione pronta da usare.

Testi e file restano nel tuo browser: non viene inviato nulla a un server.

Fai clic su una sfumatura per copiarne il valore HEX. Il numero indica il contrasto del colore del testo più leggibile (bianco o nero) su quello sfondo.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Anteprima
Salvato. Le modifiche sono ora attive.
IniziaScopri di piùNuovo

Come si usa

  1. Scegli un colore di base o inserisci un codice HEX, poi indica il nome che userai nelle classi, per esempio brand.
  2. Le sfumature da 50 (la più chiara) a 950 (la più scura) sono distribuite in base alla luminosità OKLCH. Se “Mantieni il mio colore nella sfumatura più vicina” è attivo, il tuo colore compare così com’è nella palette.
  3. Per la v4 incolla il blocco @theme nel tuo CSS; per la v3 la sezione colors in tailwind.config.js. Poi puoi usare classi come bg-brand-500.
  4. L’anteprima mostra la palette applicata a un pulsante, un badge e un messaggio di avviso.

Domande frequenti

Perché la palette è calcolata in OKLCH?

OKLCH si basa sulla luminosità percepita. Così le sfumature sembrano regolari, e colori come il giallo e il blu non hanno salti di luminosità. Anche i colori predefiniti di Tailwind v4 sono definiti in oklch().

È uguale ai colori integrati di Tailwind?

No. Lo strumento usa curve proprie di luminosità e saturazione (chroma), quindi i valori sono diversi dalla palette ufficiale. Serve a costruire in fretta una scala dello stesso tipo partendo dal colore del tuo brand.

Che fine fanno i colori che lo schermo non può mostrare?

Luminosità e tonalità restano, si riduce solo la saturazione finché il colore rientra nello spazio sRGB. I colori molto saturi possono quindi apparire un po’ più tenui in alcune sfumature.

Tailwind CSS è un marchio di Tailwind Labs Inc. Questo strumento non è affiliato a Tailwind Labs né approvato da essa.

Strumenti simili

Selettore di coloriHEX, RGB, HSL e CMYK insiemeVerifica contrastoRapporto di contrasto, livelli AA e AAAGradiente CSSGradienti lineari, radiali, coniciGeneratore di ASCII artTesto e foto in caratteri

Tutti gli strumenti