CodeKitHubWas ist dieses Tool?
Tailwind CSS liefert eine feste Standardfarbskala, statt Sie beliebige Werte für gängige UI-Farben wählen zu lassen. Jede der 22 benannten Familien (wie amber oder slate) hat genau 11 Abstufungen, nummeriert von 50 bis 950, und jede Abstufung hat einen offiziellen, von Tailwind selbst dokumentierten Hex-Wert, der identisch in den bg-, text-, border- und ring-Utilities verwendet wird.
Diese Referenz bettet diese vollständige offizielle Palette lokal ein, sodass die Suche nach einer Farbe oder einem Klassennamen weder das Öffnen der Tailwind-Dokumentation noch einen Build-Lauf oder das Durchschleusen der Klasse durch PurgeCSS erfordert, nur um zu sehen, wie sie aussieht. Hex-Suchen nutzen den euklidischen RGB-Abstand, um die nächstliegende offizielle Abstufung zu finden, und Klassensuchen sind exakt — jeder Wert hier entspricht Tailwinds dokumentierten Standardwerten.
Warum sollte man es nutzen?
- Fügen Sie einen Hex-Code aus einer Design-Datei oder einem Screenshot ein und erhalten Sie sofort den nächstliegenden Tailwind-Klassennamen, statt zu raten, welcher nummerierten Abstufung er entspricht.
- Geben Sie einen Klassennamen wie slate-900 oder bg-purple-500 ein, um dessen exakten Hex- und RGB-Wert zu sehen, ohne in der Tailwind-Dokumentation zu suchen.
- Durchsuchen Sie das vollständige Raster aus 22 Familien x 11 Abstufungen, um Töne nebeneinander zu vergleichen, bevor Sie einen auswählen.
- Erhalten Sie die bg-, text-, border- und ring-Varianten jeder Abstufung mit einem Klick, da Tailwind für alle dieselbe numerische Skala verwendet.
- Kostenlos, sofort und vollständig lokal — kein Upload, kein Konto, kein Build-Schritt nötig.
Anleitung
- Um einen Klassennamen aus einem Hex-Code zu finden: Geben Sie den Hex-Wert (mit oder ohne #) in das Suchfeld ein oder fügen Sie ihn ein — die nächstliegende offizielle Tailwind-Abstufung erscheint oberhalb des Rasters, zusammen mit dem Farbabstand, falls es keine exakte Übereinstimmung ist.
- Um einen Hex-Wert aus einem Klassennamen zu finden: Geben Sie die Klasse oder den Familiennamen ein (z. B. amber-500, bg-blue-600, oder einfach teal) — eine exakte Übereinstimmung zeigt Hex, RGB und alle Utility-Varianten; ein alleiniger Familienname filtert das Raster auf diese Familie.
- Um alles zu durchsuchen: Lassen Sie das Suchfeld leer und klicken Sie auf ein beliebiges Muster im Raster — dessen Details erscheinen im Panel oberhalb, und sein Hex-Code wird automatisch kopiert.
- Klicken Sie auf eine der bg-/text-/border-/ring-Varianten-Schaltflächen im Detail-Panel, um genau diesen Klassennamen zu kopieren.
Beispiel
Eingabe
#c4b5fdAusgabe
violet-300 — Exakte Übereinstimmung, #C4B5FD, rgb(196, 181, 253)Dieser Hex-Wert ist einer von Tailwinds eigenen dokumentierten Standardwerten, daher ist der Abstand 0 und die Übereinstimmung exakt statt angenähert.
Häufig gestellte Fragen
Sind das die offiziellen Standardfarben von Tailwind CSS?
Ja — alle 242 Hex-Werte (22 Familien x 11 Abstufungen) stammen aus Tailwinds eigener dokumentierter Standardpalette. Tailwind v4 stellt Farben intern als OKLCH dar, aber dieselbe Standardpalette und ihre dokumentierten Hex-Äquivalente sind gegenüber v3 unverändert, sodass diese Werte für beide Versionen aktuell sind.
Was bedeutet es, wenn eine Hex-Suche keine exakte Übereinstimmung ergibt?
Wenn Sie einen Hex-Code einfügen, der keiner der 242 Tailwind-Standardwerte ist (etwa eine eigene Markenfarbe), zeigt das Tool die nächstliegende offizielle Abstufung nach RGB-Abstand an und beschriftet sie mit „Nächstliegende Übereinstimmung“ samt angezeigtem Abstand — sie ist nicht pixelgenau identisch mit Ihrer Eingabe, sondern nur der nächste Tailwind-Standardwert.
Warum verwenden bg-, text-, border- und ring- alle dieselben Nummern?
Tailwind wendet eine einzige gemeinsame Farbskala über alle Utility-Kategorien hinweg an, sodass bg-amber-500, text-amber-500, border-amber-500 und ring-amber-500 alle denselben zugrunde liegenden Hex-Wert sind, nur auf eine andere CSS-Eigenschaft angewendet. Deshalb zeigt das Detail-Panel für jede nachgeschlagene Abstufung alle vier Varianten gemeinsam.
Kann ich eine ganze Familie wie einfach „blue“ ohne Abstufungsnummer nachschlagen?
Ja — die Eingabe nur eines Familiennamens (ohne Nummer) filtert das Raster auf alle 11 Abstufungen dieser Familie, damit Sie sie nebeneinander vergleichen können, ohne bereits eine bestimmte Abstufung zu wählen.
Deckt das auch eigene Tailwind-Theme-Farben ab, die ich in meiner Konfiguration definiert habe?
Nein — diese Referenz deckt nur Tailwinds eingebaute Standardpalette ab, nicht Farben, die Sie in einem theme.extend.colors-Block in tailwind.config.js oder einem @theme-Block in v4 hinzugefügt oder überschrieben haben. Wenn Ihr Projekt die Palette anpasst, können Ihre tatsächlich gerenderten Farben von dem hier für denselben Klassennamen Gezeigten abweichen.