Welche Farbformate unterstützt dieses Tool?

HEX (6-stellig, z. B. #3b82f6), RGB (0–255 pro Kanal), HSL (Farbton 0–360°, Sättigung und Helligkeit 0–100 %) und Tailwind-CSS-Klassennamen. Sie können jedes Format bearbeiten und die anderen aktualisieren sich sofort.

Wie funktioniert der Tailwind-Farbabgleich?

Das Tool vergleicht Ihre Farbe mit allen ~242 Farben der Tailwind-v3-Palette (22 Farbfamilien × 11 Schattierungen) mittels euklidischem Abstand im RGB-Farbraum. Die nächste Übereinstimmung wird als Utility-Klassenname zurückgegeben, z. B. 'blue-500'.

Ist die Tailwind-Übereinstimmung immer exakt?

Nicht immer. Wenn Ihre Farbe exakt einer Tailwind-Farbe entspricht, ist die Übereinstimmung perfekt. Bei beliebigen Farben wird der nächste Nachbar zurückgegeben, der möglicherweise nicht visuell identisch ist. Das Farbfeld neben dem Klassennamen ermöglicht den Vergleich.

Von welcher Tailwind-Version stammt die Palette?

Die Nachschlagetabelle verwendet die Tailwind-CSS-v3-Standardpalette, die alle 22 Farbfamilien (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) über 11 Schattierungen (50 bis 950) umfasst.

Kann ich einen HSL-Wert direkt eingeben?

Ja. Klicken Sie in eines der drei HSL-Zahleneingabefelder (H, S, L) und geben Sie einen Wert ein. Der Farbton ist 0–360 Grad, Sättigung und Helligkeit sind 0–100 Prozent. Die HEX- und RGB-Felder aktualisieren sich während der Eingabe.

Funktioniert dies offline?

Ja, sobald die Seite geladen ist. Alle Konvertierungsberechnungen und die Tailwind-Nachschlagetabelle sind in JavaScript gebündelt – während der Farbkonvertierung werden keine Netzwerkanfragen gestellt.

Farben konvertieren

Farben zwischen HEX-, RGB-, HSL-Formaten konvertieren und die nächste Tailwind-CSS-Klasse sofort finden.

#6366F1

HEX

RGB

HSL

H°

Tailwind

indigo-500

Nächste Tailwind-Farbklasse

Farben zwischen HEX, RGB, HSL und Tailwind sofort konvertieren

Das Wechseln zwischen Farbformaten ist ein ständiger Reibungspunkt beim UI-Entwickeln. Zolkits Farbkonverter verarbeitet HEX, RGB und HSL in beide Richtungen und findet sogar die nächste Tailwind-CSS-Farbklasse – so kommen Sie in einem Schritt von einem Design-Tool-Hex-Code zu einer Utility-Klasse.

Drei Formate gleichzeitig

Beliebiges Format bearbeiten – HEX, RGB oder HSL – und alle anderen aktualisieren sich sofort. Eine Zahl ändern und jede Darstellung bleibt synchron.

Tailwind-Farbabgleich

Findet automatisch die nächste Tailwind-v3-Farbklasse aus der vollständigen 22-Familien-Palette mittels euklidischem RGB-Abstand.

Live-Farbvorschau

Ein großer Farbwähler bietet eine sofortige visuelle Vorschau der ausgewählten Farbe während der Werteanpassung.

Beliebiges Format kopieren

Ein-Klick-Kopieren für jede Formatkarte – HEX-String, rgb()-Funktion, hsl()-Funktion oder Tailwind-Klassenname kopieren.

100 % Privat

Alle Farbberechnungen laufen lokal in Ihrem Browser. Es werden keine Daten an einen Server gesendet.

Für immer kostenlos

Kein Konto, keine Limits, keine Bezahlschranken. Farbkonvertierung ist immer kostenlos.

So konvertieren Sie Farben

1
Klicken Sie auf den Farbwähler oder geben Sie einen Wert in ein beliebiges Formatfeld ein (HEX, RGB oder HSL).
2
Alle anderen Formatfelder aktualisieren sich automatisch. Die Tailwind-Karte zeigt die nächste passende Utility-Klasse.
3
Klicken Sie auf „Kopieren” auf einer beliebigen Karte, um dieses Format in die Zwischenablage zu kopieren.