CodeKitHubWat is deze tool?
Tailwind CSS levert een vaste standaard kleurenschaal in plaats van je willekeurige waarden te laten kiezen voor veelvoorkomende UI-kleuren. Elk van de 22 benoemde families (zoals amber of slate) heeft precies 11 tinten, genummerd van 50 tot 950, en elke tint heeft één officiële hex-waarde die door Tailwind zelf is gedocumenteerd en identiek wordt gebruikt in de bg-, text-, border- en ring-utilities.
Dit overzicht bevat het volledige officiële palet lokaal, zodat het opzoeken van een kleur of klassenaam niet vereist dat je Tailwinds documentatie opent, een build uitvoert, of de klasse door PurgeCSS haalt alleen om te zien hoe hij eruitziet. Hex-opzoekingen gebruiken de Euclidische afstand in RGB om de dichtstbijzijnde officiële tint te vinden, en klasse-opzoekingen zijn exact — elke waarde hier komt overeen met Tailwinds gedocumenteerde standaardwaarden.
Waarom gebruiken?
- Plak een hex-code uit een ontwerpbestand of screenshot en krijg direct de dichtstbijzijnde Tailwind-klassenaam, in plaats van te raden met welke genummerde tint hij overeenkomt.
- Typ een klassenaam zoals slate-900 of bg-purple-500 om de exacte hex- en RGB-waarde te zien zonder in Tailwinds documentatie te zoeken.
- Blader door het volledige raster van 22 families x 11 tinten om tinten naast elkaar te vergelijken voordat je er een kiest.
- Krijg de bg-, text-, border- en ring-varianten voor elke tint met één klik, omdat Tailwind voor allemaal dezelfde numerieke schaal gebruikt.
- Gratis, direct en volledig lokaal — geen upload, geen account, geen build-stap.
Hoe te gebruiken
- Om een klassenaam te vinden op basis van een hex-code: typ of plak de hex-waarde (met of zonder #) in het zoekvak — de dichtstbijzijnde officiële Tailwind-tint verschijnt boven het raster, samen met de kleurafstand als het geen exacte match is.
- Om een hex-waarde te vinden op basis van een klassenaam: typ de klasse- of familienaam (bijv. amber-500, bg-blue-600, of gewoon teal) — een exacte match toont de hex, RGB en alle utility-varianten; alleen een familienaam filtert het raster naar die familie.
- Om alles te doorbladeren: laat het zoekvak leeg en klik op een willekeurig stalen in het raster — de details verschijnen in het paneel erboven en de hex-code wordt automatisch gekopieerd.
- Klik op een van de bg-/text-/border-/ring-variantknoppen in het detailpaneel om de exacte klassenaam te kopiëren.
Voorbeeld
Invoer
#c4b5fdUitvoer
violet-300 — Exacte match, #C4B5FD, rgb(196, 181, 253)Deze hex is een van Tailwinds eigen gedocumenteerde standaardwaarden, dus de afstand is 0 en de match is exact in plaats van benaderend.
Veelgestelde vragen
Zijn dit de officiële standaardkleuren van Tailwind CSS?
Ja — alle 242 hex-waarden (22 families x 11 tinten) komen uit Tailwinds eigen gedocumenteerde standaardpalet. Tailwind v4 representeert kleuren intern als OKLCH, maar hetzelfde standaardpalet en de gedocumenteerde hex-equivalenten ervan zijn ongewijzigd ten opzichte van v3, dus deze waarden zijn actueel voor beide versies.
Wat betekent het als een hex-opzoeking geen exacte match is?
Als je een hex-code plakt die niet een van Tailwinds 242 standaardwaarden is (bijvoorbeeld een aangepaste merkkleur), toont de tool de dichtstbijzijnde officiële tint op basis van RGB-afstand en labelt deze als "Dichtstbijzijnde match" met de getoonde afstand — hij zal niet pixel-identiek zijn aan je invoer, alleen de dichtstbijzijnde Tailwind-standaard.
Waarom gebruiken bg-, text-, border- en ring- allemaal dezelfde nummers?
Tailwind past één gedeelde kleurenschaal toe over elke utility-categorie, dus bg-amber-500, text-amber-500, border-amber-500 en ring-amber-500 zijn allemaal dezelfde onderliggende hex-waarde toegepast op een andere CSS-eigenschap. Daarom toont het detailpaneel alle vier de varianten samen voor elke tint die je opzoekt.
Kan ik een familiegroep zoals alleen "blue" opzoeken zonder tintnummer?
Ja — het typen van alleen een familienaam (zonder nummer) filtert het raster tot alleen de 11 tinten van die familie, zodat je ze naast elkaar kunt vergelijken zonder al een specifieke tint te kiezen.
Dekt dit aangepaste Tailwind-themakleuren die ik in mijn configuratie heb gedefinieerd?
Nee — dit overzicht dekt alleen Tailwinds ingebouwde standaardpalet, niet kleuren die je hebt toegevoegd of overschreven in een tailwind.config.js theme.extend.colors-blok of een v4 @theme-blok. Als je project het palet aanpast, kunnen je daadwerkelijk gerenderde kleuren afwijken van wat hier wordt getoond voor dezelfde klassenaam.