CodeKitHubHvad er dette værktøj?
Tailwind CSS leverer en fast standardfarveskala i stedet for at lade dig vælge vilkårlige værdier til almindelige UI-farver. Hver af de 22 navngivne familier (som amber eller slate) har præcis 11 nuancer, nummereret fra 50 til 950, og hver nuance har én officiel hex-værdi, der er dokumenteret af Tailwind selv og bruges identisk på tværs af bg-, text-, border- og ring-utilities.
Denne reference indlejrer hele den officielle palet lokalt, så det ikke kræver at åbne Tailwinds dokumentation, køre et build eller sende klassen gennem PurgeCSS bare for at se, hvordan den ser ud, når man skal slå en farve eller et klassenavn op. Hex-opslag bruger euklidisk afstand i RGB til at finde den nærmeste officielle nuance, og klasseopslag er præcise — hver værdi her matcher Tailwinds dokumenterede standardværdier.
Hvorfor bruge det?
- Indsæt en hex-kode fra en designfil eller et skærmbillede og få øjeblikkeligt det nærmeste Tailwind-klassenavn i stedet for at gætte, hvilken nummereret nuance den svarer til.
- Skriv et klassenavn som slate-900 eller bg-purple-500 for at se dens præcise hex- og RGB-værdi uden at grave i Tailwinds dokumentation.
- Gennemse hele gitteret med 22 familier x 11 nuancer for at sammenligne nuancer side om side, før du vælger en.
- Få bg-, text-, border- og ring-varianterne for enhver nuance med ét klik, da Tailwind bruger den samme numeriske skala på tværs af dem alle.
- Gratis, øjeblikkeligt og fuldt lokalt — ingen upload, ingen konto, intet build-trin.
Sådan bruger du det
- For at finde et klassenavn fra en hex-kode: skriv eller indsæt hex-værdien (med eller uden #) i søgefeltet — den nærmeste officielle Tailwind-nuance vises over gitteret sammen med farveafstanden, hvis det ikke er et præcist match.
- For at finde en hex-værdi fra et klassenavn: skriv klasse- eller familienavnet (f.eks. amber-500, bg-blue-600 eller blot teal) — et præcist match viser hex, RGB og alle utility-varianter; et familienavn alene filtrerer gitteret til den familie.
- For at gennemse alt: lad søgefeltet stå tomt, og klik på en farveprøve i gitteret — dens detaljer vises i panelet ovenfor, og dens hex-kode kopieres automatisk.
- Klik på en af bg-/text-/border-/ring-variantknapperne i detaljepanelet for at kopiere det præcise klassenavn.
Eksempel
Input
#c4b5fdOutput
violet-300 — Præcist match, #C4B5FD, rgb(196, 181, 253)Denne hex-værdi er en af Tailwinds egne dokumenterede standardværdier, så afstanden er 0, og matchet er præcist frem for tilnærmet.
Ofte stillede spørgsmål
Er dette de officielle Tailwind CSS-standardfarver?
Ja — alle 242 hex-værdier (22 familier x 11 nuancer) kommer fra Tailwinds egen dokumenterede standardpalet. Tailwind v4 repræsenterer farver internt som OKLCH, men den samme standardpalet og dens dokumenterede hex-ækvivalenter er uændrede fra v3, så disse værdier er aktuelle for begge versioner.
Hvad betyder det, når et hex-opslag ikke er et præcist match?
Hvis du indsætter en hex-kode, der ikke er en af Tailwinds 242 standardværdier (f.eks. en brugerdefineret brandfarve), viser værktøjet den nærmeste officielle nuance ud fra RGB-afstand og markerer den som "Nærmeste match" med afstanden vist — den vil ikke være pixel-identisk med dit input, kun den nærmeste Tailwind-standard.
Hvorfor bruger bg-, text-, border- og ring- alle de samme numre?
Tailwind anvender én fælles farveskala på tværs af alle utility-kategorier, så bg-amber-500, text-amber-500, border-amber-500 og ring-amber-500 er alle den samme underliggende hex-værdi anvendt på en anden CSS-egenskab. Derfor viser detaljepanelet alle fire varianter sammen for enhver nuance, du slår op.
Kan jeg slå en familiegruppe som bare "blue" op uden et nuancenummer?
Ja — hvis du skriver et familienavn alene (uden nummer), filtreres gitteret ned til blot den families 11 nuancer, så du kan sammenligne dem side om side, uden endnu at have valgt en bestemt nuance.
Dækker dette brugerdefinerede Tailwind-temafarver, jeg har defineret i min konfiguration?
Nej — denne reference dækker kun Tailwinds indbyggede standardpalet, ikke farver, du har tilføjet eller overskrevet i en tailwind.config.js theme.extend.colors-blok eller en v4 @theme-blok. Hvis dit projekt tilpasser paletten, kan dine faktiske gengivne farver afvige fra det, der vises her for det samme klassenavn.