CodeKitHubVad är detta verktyg?
Tailwind CSS levererar en fast standardfärgskala istället för att låta dig välja godtyckliga värden för vanliga UI-färger. Var och en av de 22 namngivna familjerna (som amber eller slate) har exakt 11 nyanser, numrerade från 50 till 950, och varje nyans har ett officiellt hex-värde som dokumenteras av Tailwind själv och används identiskt över bg-, text-, border- och ring-utilities.
Denna referens bäddar in hela den officiella paletten lokalt, så att uppslag av en färg eller ett klassnamn inte kräver att man öppnar Tailwinds dokumentation, kör en build eller skickar klassen genom PurgeCSS bara för att se hur den ser ut. Hex-uppslag använder euklidiskt avstånd i RGB för att hitta den närmaste officiella nyansen, och klassuppslag är exakta — varje värde här matchar Tailwinds dokumenterade standardvärden.
Varför använda det?
- Klistra in en hex-kod från en designfil eller skärmdump och få omedelbart det närmaste Tailwind-klassnamnet, istället för att gissa vilken numrerad nyans den motsvarar.
- Skriv ett klassnamn som slate-900 eller bg-purple-500 för att se dess exakta hex- och RGB-värde utan att gräva i Tailwinds dokumentation.
- Bläddra genom hela rutnätet med 22 familjer x 11 nyanser för att jämföra nyanser sida vid sida innan du väljer en.
- Få bg-, text-, border- och ring-varianterna för vilken nyans som helst med ett klick, eftersom Tailwind använder samma numeriska skala för alla.
- Gratis, omedelbart och helt lokalt — ingen uppladdning, inget konto, inget build-steg.
Så använder du det
- För att hitta ett klassnamn från en hex-kod: skriv eller klistra in hex-värdet (med eller utan #) i sökrutan — den närmaste officiella Tailwind-nyansen visas ovanför rutnätet, tillsammans med färgavståndet om det inte är en exakt matchning.
- För att hitta ett hex-värde från ett klassnamn: skriv klass- eller familjenamnet (t.ex. amber-500, bg-blue-600, eller bara teal) — en exakt matchning visar hex, RGB och alla utility-varianter; enbart ett familjenamn filtrerar rutnätet till den familjen.
- För att bläddra igenom allt: lämna sökrutan tom och klicka på ett valfritt färgprov i rutnätet — dess detaljer visas i panelen ovanför, och dess hex-kod kopieras automatiskt.
- Klicka på någon av bg-/text-/border-/ring-variantknapparna i detaljpanelen för att kopiera det exakta klassnamnet.
Exempel
Inmatning
#c4b5fdResultat
violet-300 — Exakt matchning, #C4B5FD, rgb(196, 181, 253)Denna hex är ett av Tailwinds egna dokumenterade standardvärden, så avståndet är 0 och matchningen är exakt snarare än approximativ.
Vanliga frågor
Är detta de officiella standardfärgerna i Tailwind CSS?
Ja — alla 242 hex-värden (22 familjer x 11 nyanser) kommer från Tailwinds egen dokumenterade standardpalett. Tailwind v4 representerar färger internt som OKLCH, men samma standardpalett och dess dokumenterade hex-motsvarigheter är oförändrade från v3, så dessa värden är aktuella för båda versionerna.
Vad betyder det när ett hex-uppslag inte är en exakt matchning?
Om du klistrar in en hex-kod som inte är ett av Tailwinds 242 standardvärden (till exempel en anpassad varumärkesfärg) visar verktyget den närmaste officiella nyansen baserat på RGB-avstånd och märker den som "Närmaste matchning" med avståndet visat — den kommer inte att vara pixelidentisk med din inmatning, bara den närmaste Tailwind-standarden.
Varför använder bg-, text-, border- och ring- alla samma nummer?
Tailwind tillämpar en gemensam färgskala över alla utility-kategorier, så bg-amber-500, text-amber-500, border-amber-500 och ring-amber-500 är alla samma underliggande hex-värde tillämpat på en annan CSS-egenskap. Det är därför detaljpanelen visar alla fyra varianterna tillsammans för vilken nyans du än slår upp.
Kan jag slå upp en familjegrupp som bara "blue" utan nyansnummer?
Ja — att skriva enbart ett familjenamn (utan nummer) filtrerar rutnätet till endast den familjens 11 nyanser, så att du kan jämföra dem sida vid sida utan att ännu ha valt en specifik nyans.
Täcker detta anpassade Tailwind-temafärger som jag har definierat i min konfiguration?
Nej — denna referens täcker endast Tailwinds inbyggda standardpalett, inte färger du har lagt till eller åsidosatt i ett tailwind.config.js theme.extend.colors-block eller ett v4 @theme-block. Om ditt projekt anpassar paletten kan dina faktiskt renderade färger avvika från det som visas här för samma klassnamn.