CodeKitHubHva er dette verktøyet?
Tailwind CSS leverer en fast standard fargeskala i stedet for å la deg velge vilkårlige verdier for vanlige UI-farger. Hver av de 22 navngitte familiene (som amber eller slate) har nøyaktig 11 nyanser, nummerert fra 50 til 950, og hver nyanse har én offisiell hex-verdi som er dokumentert av Tailwind selv og brukes identisk på tvers av bg-, text-, border- og ring-utilities.
Denne referansen innebygger hele den offisielle paletten lokalt, slik at oppslag av en farge eller et klassenavn ikke krever å åpne Tailwinds dokumentasjon, kjøre en build, eller sende klassen gjennom PurgeCSS bare for å se hvordan den ser ut. Hex-oppslag bruker euklidsk avstand i RGB for å finne den nærmeste offisielle nyansen, og klasseoppslag er eksakte — hver verdi her samsvarer med Tailwinds dokumenterte standardverdier.
Hvorfor bruke det?
- Lim inn en hex-kode fra en designfil eller et skjermbilde og få umiddelbart det nærmeste Tailwind-klassenavnet, i stedet for å gjette hvilken nummerert nyanse den tilsvarer.
- Skriv inn et klassenavn som slate-900 eller bg-purple-500 for å se dens eksakte hex- og RGB-verdi uten å grave i Tailwinds dokumentasjon.
- Bla gjennom hele gitteret med 22 familier x 11 nyanser for å sammenligne nyanser side om side før du velger en.
- Få bg-, text-, border- og ring-variantene for enhver nyanse med ett klikk, siden Tailwind bruker samme numeriske skala på tvers av dem alle.
- Gratis, øyeblikkelig og fullstendig lokalt — ingen opplasting, ingen konto, ingen build-steg.
Slik bruker du det
- For å finne et klassenavn fra en hex-kode: skriv eller lim inn hex-verdien (med eller uten #) i søkefeltet — den nærmeste offisielle Tailwind-nyansen vises over gitteret, sammen med fargeavstanden hvis det ikke er en eksakt match.
- For å finne en hex-verdi fra et klassenavn: skriv inn klasse- eller familienavnet (f.eks. amber-500, bg-blue-600, eller bare teal) — en eksakt match viser hex, RGB og alle utility-varianter; et familienavn alene filtrerer gitteret til den familien.
- For å bla gjennom alt: la søkefeltet stå tomt og klikk på en hvilken som helst fargeprøve i gitteret — detaljene vises i panelet ovenfor, og hex-koden kopieres automatisk.
- Klikk på en av bg-/text-/border-/ring-variantknappene i detaljpanelet for å kopiere det eksakte klassenavnet.
Eksempel
Inndata
#c4b5fdResultat
violet-300 — Eksakt match, #C4B5FD, rgb(196, 181, 253)Denne hex-verdien er en av Tailwinds egne dokumenterte standardverdier, så avstanden er 0 og matchen er eksakt fremfor tilnærmet.
Ofte stilte spørsmål
Er dette de offisielle standardfargene i Tailwind CSS?
Ja — alle 242 hex-verdier (22 familier x 11 nyanser) kommer fra Tailwinds egen dokumenterte standardpalett. Tailwind v4 representerer farger internt som OKLCH, men samme standardpalett og dens dokumenterte hex-ekvivalenter er uendret fra v3, så disse verdiene er gyldige for begge versjoner.
Hva betyr det når et hex-oppslag ikke er en eksakt match?
Hvis du limer inn en hex-kode som ikke er en av Tailwinds 242 standardverdier (for eksempel en tilpasset merkevarefarge), viser verktøyet den nærmeste offisielle nyansen basert på RGB-avstand og merker den som "Nærmeste match" med avstanden vist — den vil ikke være pikselidentisk med inndataene dine, bare den nærmeste Tailwind-standarden.
Hvorfor bruker bg-, text-, border- og ring- alle de samme tallene?
Tailwind bruker én felles fargeskala på tvers av alle utility-kategorier, så bg-amber-500, text-amber-500, border-amber-500 og ring-amber-500 er alle den samme underliggende hex-verdien brukt på en annen CSS-egenskap. Det er derfor detaljpanelet viser alle fire variantene sammen for enhver nyanse du slår opp.
Kan jeg slå opp en familiegruppe som bare "blue" uten nyansenummer?
Ja — å skrive inn bare et familienavn (uten nummer) filtrerer gitteret ned til kun de 11 nyansene i den familien, slik at du kan sammenligne dem side om side uten å ha valgt en bestemt nyanse ennå.
Dekker dette tilpassede Tailwind-temafarger jeg har definert i konfigurasjonen min?
Nei — denne referansen dekker kun Tailwinds innebygde standardpalett, ikke farger du har lagt til eller overstyrt i en tailwind.config.js theme.extend.colors-blokk eller en v4 @theme-blokk. Hvis prosjektet ditt tilpasser paletten, kan de faktisk gjengitte fargene dine avvike fra det som vises her for samme klassenavn.