Tailwind-Farbkonverter
HEX in die nächstgelegene Tailwind-Farbklasse und die Klasse sofort zurück in HEX umwandeln
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Ordnet eine beliebige HEX-Farbe der perzeptiv am nächsten liegenden Klasse aus der Standardpalette von Tailwind CSS zu (22 Farbreihen × 11 Stufen, insgesamt 242 Farben). Umgekehrt zeigt es bei Auswahl von Farbreihe und Helligkeit (Shade) den exakten HEX- und RGB-Wert der Klasse an, den Sie direkt kopieren können.
Anleitung
- Legen Sie im Reiter „HEX → Klasse" die Farbe über den Farbwähler oder das HEX-Eingabefeld fest.
- Prüfen Sie die nächstgelegene Tailwind-Klasse, die Kandidatenfarbe und Δ (Farbabstand) und kopieren Sie Klasse, HEX oder die bg--Utility.
- Im Reiter „Klasse → HEX" werden bei Auswahl von Farbreihe und Helligkeit die HEX- und RGB-Werte angezeigt.
- Fügen Sie den gewünschten Wert über die Kopiertaste daneben direkt in Ihren Code ein.
FAQ
- Warum weicht die zugeordnete Klassenfarbe leicht von der tatsächlichen Farbe ab?
- Die Standardpalette von Tailwind umfasst nur 242 feste Farben, deshalb kann sie nie exakt einer beliebigen HEX-Farbe entsprechen. Das Werkzeug wählt über den perzeptiven Farbabstand (Redmean) die ähnlichste Farbe; je kleiner der angezeigte Δ-Wert, desto näher am Original.
- Lässt es sich auch mit Tailwind v4 verwenden?
- Die Farbwerte der Standardpalette sind in v3 und v4 praktisch identisch, sodass sich die meisten unverändert nutzen lassen. Haben Sie im Projekt jedoch Themenfarben eigen definiert, gelten deren Einstellungen.
- Wird die eingegebene Farbe an einen Server gesendet?
- Nein. Alle Umwandlungen laufen ausschließlich im Browser ab, es werden keine Daten übertragen oder gespeichert. Die angezeigten Klassennamen dienen als Orientierung; gleichen Sie sie mit den Werten Ihres tatsächlichen Designsystems ab.