Was ist Tailwind-Farbsuche?

Tailwind Color Finder nimmt jeden Farbwert entgegen — hex, rgb(), hsl() oder einen CSS-Namen wie teal — und liefert sofort die am nächsten passende Tailwind-CSS-Utility-Klasse. Statt Paletten per Auge zu vergleichen, fügst du einen Wert aus deinem Designtool ein und bekommst den genauen Klassennamen direkt für den Code.

Der Abgleich nutzt den wahrnehmungsbasierten ΔE-Abstand im CIE-Lab-Raum statt einer reinen RGB-Differenz, sodass das Ergebnis dem entspricht, was das Auge als ähnlich empfindet, nicht dem rechnerischen Minimum. Die komplette Standard-Palette von Tailwind v3/v4 wird durchsucht, alle Familien von slate bis rose, Abstufungen 50 bis 950 sowie Schwarz und Weiß. Die zehn besten Treffer werden mit Abstand angezeigt.

Anleitung

1. Geben Sie einen Hex-Farbcode aus Ihrem Design-Entwurf ein oder wählen Sie eine Farbe mit dem Farbwähler.
2. Das Tool zeigt sofort die nächstliegende Tailwind-CSS-Farbklasse mit einem visuellen Direktvergleich an.
3. Kopieren Sie den Tailwind-Klassennamen (z. B. bg-blue-500) direkt in Ihren Code. Die Farbdistanz zeigt Ihnen, wie nah die Übereinstimmung ist.

Wann verwenden

• Marken- oder Figma-Hex-Codes für ein neues Projekt in Tailwind-Klassen übersetzen.
• Ein altes Stylesheet mit eingestreuten Hex-Werten auf Utility-Klassen migrieren.
• Den semantisch passenden Ton wählen (red-500 vs rose-500), wenn nur ein einzelner Hex vorliegt.

Ergebnis

Ihr Designer gibt Ihnen die Markenfarbe #2563EB. Fügen Sie sie ein und das Tool zeigt, dass sie exakt blue-500 entspricht. Bei #3A7BC8 wird sky-600 als nächste Übereinstimmung angezeigt, inklusive eines Distanzwertes zur Einschätzung der Genauigkeit.

Häufige Fragen

Woran erkennt das Tool die am besten passende Tailwind-Farbe?

Beide Hex-Werte werden nach CIE Lab umgerechnet und mit ΔE76 verglichen, einem Maß für den wahrgenommenen Farbabstand. Unter 1 ist der Unterschied kaum sichtbar, über 5 ist die Verschiebung in Farbton oder Helligkeit deutlich erkennbar.

Welche Version der Tailwind-Palette wird verwendet?

Die Standard-Palette von v3/v4: 22 Familien (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) in den Stufen 50 bis 950, plus Schwarz und Weiß. Themenspezifische Farben aus dem Projekt sind nicht enthalten.

Warum landet mein Hex bei einer Stufe, die ich nicht erwartet hätte?

Der Lab-Abstand wägt Farbton, Sättigung und Helligkeit gleichzeitig ab. Ein gedämpftes Grün kann näher an einem Slate liegen als an einem leuchtenden Teal, weil die Helligkeitsdifferenz dominiert. Schauen Sie sich die Top-10-Liste an und wählen Sie nach Farbtonfamilie.

Kann ich das Ergebnis als CSS-Variable kopieren statt als Tailwind-Klasse?

Im Detailbereich werden Klassenname (bg-blue-500) und Hex angezeigt. Kopieren Sie den Hex und packen Sie ihn in var(--brand), wenn Sie eigene CSS-Custom-Properties statt der Utility-Klassen direkt einsetzen. Und wenn nichts in der Palette nahe genug liegt, zeigt das Tool die Arbitrary-Value-Klasse (bg-[#hex]) aus Ihrer exakten Farbe an, sodass Sie pixelgenau bleiben, ohne Ihr Theme zu ändern.

Kann ich rgb(), hsl() oder einen CSS-Farbnamen statt hex einfügen?

Ja. Das Feld versteht hex (#2563EB oder 2563EB, 3- oder 6-stellig), rgb()/rgba(), hsl()/hsla() mit Grad oder einheitsfreiem Farbton sowie alle benannten CSS-Farben (teal, rebeccapurple, cornflowerblue und so weiter). Alphakanäle werden ignoriert — verglichen wird mit dem deckenden RGB-Äquivalent.

Ähnliche Tools