CodeKitHubChe cos'è questo strumento?
Tailwind CSS offre una scala di colori predefinita fissa invece di lasciarti scegliere valori arbitrari per i colori comuni dell'interfaccia. Ciascuna delle 22 famiglie con nome (come amber o slate) ha esattamente 11 sfumature, numerate da 50 a 950, e ogni sfumatura ha un unico valore hex ufficiale documentato dallo stesso Tailwind e usato in modo identico nelle utility bg-, text-, border- e ring-.
Questo riferimento incorpora localmente quella palette ufficiale completa, quindi cercare un colore o un nome classe non richiede di aprire la documentazione di Tailwind, eseguire una build, o far passare la classe attraverso PurgeCSS solo per vedere il suo aspetto. Le ricerche per hex usano la distanza euclidea RGB per trovare la sfumatura ufficiale più vicina, e le ricerche per classe sono esatte — ogni valore qui corrisponde ai valori predefiniti documentati di Tailwind.
Perché usarlo?
- Incolla un codice hex da un file di design o uno screenshot e ottieni istantaneamente il nome classe Tailwind più vicino, invece di indovinare a quale sfumatura numerata corrisponde.
- Digita un nome classe come slate-900 o bg-purple-500 per vedere il suo valore hex e RGB esatto senza cercare nella documentazione di Tailwind.
- Sfoglia la griglia completa di 22 famiglie x 11 sfumature per confrontare le sfumature una accanto all'altra prima di sceglierne una.
- Ottieni le varianti bg-, text-, border- e ring- di qualsiasi sfumatura con un clic, dato che Tailwind usa la stessa scala numerica per tutte.
- Gratuito, istantaneo e completamente locale — nessun caricamento, nessun account, nessun passaggio di build.
Come si usa
- Per trovare un nome classe a partire da un codice hex: digita o incolla il valore hex (con o senza #) nella casella di ricerca — la sfumatura ufficiale Tailwind più vicina appare sopra la griglia, insieme alla distanza cromatica se non è una corrispondenza esatta.
- Per trovare un valore hex a partire da un nome classe: digita la classe o il nome della famiglia (per esempio amber-500, bg-blue-600, o semplicemente teal) — una corrispondenza esatta mostra hex, RGB e tutte le varianti utility; un nome famiglia da solo filtra la griglia su quella famiglia.
- Per sfogliare tutto: lascia vuota la casella di ricerca e clicca su qualsiasi campione nella griglia — i suoi dettagli appaiono nel pannello sopra e il suo codice hex viene copiato automaticamente.
- Clicca su uno qualsiasi dei pulsanti varianti bg-/text-/border-/ring- nel pannello dei dettagli per copiare esattamente quel nome classe.
Esempio
Input
#c4b5fdRisultato
violet-300 — Corrispondenza esatta, #C4B5FD, rgb(196, 181, 253)Questo hex è uno dei valori predefiniti documentati dallo stesso Tailwind, quindi la distanza è 0 e la corrispondenza è esatta anziché approssimata.
Domande frequenti
Questi sono i colori predefiniti ufficiali di Tailwind CSS?
Sì — tutti i 242 valori hex (22 famiglie x 11 sfumature) provengono dalla palette predefinita ufficialmente documentata da Tailwind. Tailwind v4 rappresenta i colori internamente come OKLCH, ma la stessa palette predefinita e i suoi equivalenti hex documentati restano invariati rispetto alla v3, quindi questi valori sono validi per entrambe le versioni.
Cosa significa quando una ricerca per hex non è una corrispondenza esatta?
Se incolli un codice hex che non è uno dei 242 valori predefiniti di Tailwind (un colore del brand personalizzato, per esempio), lo strumento mostra la sfumatura ufficiale più vicina in base alla distanza RGB e la etichetta come "Corrispondenza più vicina" con la distanza mostrata — non sarà identica pixel per pixel al tuo input, solo il valore predefinito Tailwind più vicino.
Perché bg-, text-, border- e ring- usano tutti gli stessi numeri?
Tailwind applica un'unica scala di colori condivisa in tutte le categorie utility, quindi bg-amber-500, text-amber-500, border-amber-500 e ring-amber-500 sono tutti lo stesso valore hex di base applicato a una proprietà CSS diversa. Questo è il motivo per cui il pannello dei dettagli mostra tutte e quattro le varianti insieme per qualsiasi sfumatura tu cerchi.
Posso cercare un gruppo famiglia come semplicemente "blue" senza numero di sfumatura?
Sì — digitare solo un nome famiglia (senza numero) filtra la griglia su tutte le 11 sfumature di quella famiglia, così puoi confrontarle una accanto all'altra, senza ancora scegliere una sfumatura specifica.
Questo copre i colori del tema Tailwind personalizzati che ho definito nella mia configurazione?
No — questo riferimento copre solo la palette predefinita integrata di Tailwind, non i colori che hai aggiunto o sovrascritto in un blocco theme.extend.colors di tailwind.config.js o un blocco @theme della v4. Se il tuo progetto personalizza la palette, i colori effettivamente renderizzati potrebbero differire da quanto mostrato qui per lo stesso nome classe.