Colori Tailwind CSS: la palette predefinita completa

Colori Tailwind CSS

Colori Tailwind CSS: palette v4 completa, copia con un clic | We.Inc

Tutti i colori predefiniti di Tailwind CSS v4 da 50 a 950, in campioni che copi con un clic come classe, variabile CSS, valore OKLCH o hex, più come aggiungere e rimuovere colori con @theme.

Tailwind CSS v4 include una palette predefinita di famiglie di colori con nome, dal rosso e blu ai neutri come slate, zinc e stone, ciascuna in 11 tonalità da 50 (la più chiara) a 950 (la più scura), più nero e bianco. La versione 4 definisce ogni tonalità in OKLCH come variabile CSS, ad esempio --color-blue-500, che usi come bg-blue-500.

Dove compare un colore della palette in Tailwind v4

Fai clic su un campione per copiarlo nel formato che ti serve: la classe utility, la variabile CSS, il valore OKLCH che Tailwind usa davvero, o un hex approssimato per gli strumenti che accettano solo hex. Filtra per nome per saltare a una famiglia. La tabella completa sotto i campioni elenca ogni tonalità come la definisce theme.css.

Domande frequenti

Perché i colori di Tailwind v4 sono in OKLCH invece che in hex?

La versione 4 definisce la sua palette in OKLCH, il cui canale L è la luminosità percepita, così le tonalità possono essere distanziate in base a quanto appaiono chiare. Raggiunge anche colori più vivaci sugli schermi wide-gamut. La funzione oklch() funziona nei principali browser da maggio 2023, quindi i browser leggono i valori direttamente.

Come aggiungo un colore personalizzato in Tailwind v4?

Dichiara una variabile nel namespace --color- dentro @theme nel tuo CSS, ad esempio --color-midnight: #121063. Tailwind genera poi bg-midnight, text-midnight e il resto. Non serve nessuna voce in tailwind.config.js.

Come rimuovo i colori predefiniti che non uso?

Imposta la famiglia su initial dentro @theme, ad esempio --color-lime-*: initial. Così rimuovi ogni tonalità lime dalle utility e dalle variabili generate.

Come rendo un colore semitrasparente?

Aggiungi una barra e un'opacità alla classe: bg-sky-500/50 per il 50%, o un valore arbitrario come bg-pink-500/[71.37%]. Nel tuo CSS, la funzione --alpha() fa lo stesso con una variabile.

Posso usare un colore Tailwind nel CSS normale?

Sì. Ogni colore della palette è esposto come variabile CSS, quindi color: var(--color-blue-500) funziona in qualsiasi foglio di stile che carica Tailwind.

Leggere i numeri delle tonalità

Sovrascrivere una singola tonalità

Il valore OKLCH di ogni tonalità

Questi sono i valori del theme.css di Tailwind. Il nero è #000 e il bianco è #fff.

Palette predefinita di Tailwind CSS v4 in OKLCH

Personalizzare i colori con @theme

Aggiungere i colori del brand

Le variabili nel namespace --color- diventano utility. Qui bg-brand-500 e text-ink iniziano a funzionare accanto ai valori predefiniti.

Rimuovere le famiglie che non usi mai

Impostare un namespace su initial lo elimina. La prima riga rimuove una famiglia; la seconda rimuoverebbe tutti i colori predefiniti.

Pannello colorato con testo abbinato

Uno sfondo chiaro e una tonalità di testo scura della stessa famiglia, più un bordo due passi più scuro dello sfondo.

Usare le variabili della palette nel tuo CSS

Utile per i widget di terze parti a cui non puoi aggiungere classi.

Fai clic su un campione per copiarlo

Cosa copia un clic

Classe

Variabile CSS

OKLCH

Hex (approssimato)

Prefisso utility

Filtra i colori

Copiato {v}

Ancora niente di copiato.

Nessuna famiglia di colori corrisponde a quel nome.

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito