HEX in Tailwind-Farbe
Finde zu jedem HEX-Code die nächste Tailwind-Farbe, kostenlos und online. Füge deine Markenfarbe ein und du bekommst den passendsten Namen aus der Standardpalette, etwa blue-600, für Tailwind 4 oder Tailwind 3. Ein ΔE-Wert zeigt, wie nah er liegt, zwei Farbfelder zeigen den Unterschied.
So findest du die passende Tailwind-Farbe zu HEX
- 1Wähle unter „Tailwind-Version“ Tailwind 4 oder Tailwind 3
- 2Füge deinen HEX-Code in „Farbe“ ein
- 3Lies den nächsten Tailwind-Namen und sein ΔE ab und kopiere ihn
- Ein Farbname für Klassen wie blue-600
So funktioniert es
- Beide Versionen.Tailwind 4 hat die Standardfarben geändert. Wechsle die Version, und die Suche läuft neu
- Ehrlich beim Abstand.Du siehst „genau“ oder „am nächsten, ΔE“ mit dem Abstand nach CIEDE2000
- Nichts wird verschickt.Die Palette steckt in der Seite, gesucht wird in deinem Browser
Was du tun kannst
- Einen HEX-Code der nächsten Farbe aus 22 Paletten mit je 11 Stufen zuordnen, von slate-50 bis rose-950
- Den Unterschied der Versionen sehen: #2563EB ist in Tailwind 3 genau blue-600, in Tailwind 4 blue-600 mit ΔE 2.22
- Deine Farbe und die Tailwind-Farbe in zwei Farbfeldern nebeneinander vergleichen
- In der Liste den nächsten Treffer beider Versionen und den nächsten CSS-Namen lesen, egal welche Version gewählt ist
- Statt HEX auch rgb(), hsl() oder oklch() aus einer Designdatei einfügen
Gut zu wissen
- Du bekommst nur den Namen, etwa amber-300. Die Utility setzt du selbst davor: bg-amber-300, text-amber-300 oder border-amber-300
- Durchsucht wird nur die Standardpalette. Farben aus deinem eigenen Theme kennt die Seite nicht, und Schwarz und Weiß sind ausgenommen
- Tailwind 4 legt seine Farben in OKLCH fest, Tailwind 3 in HEX, hier aus Tailwind 4.1.11 und 3.4.17. Derselbe Name kann in beiden leicht anders aussehen
- Ist das ΔE hoch, passt keine Standardfarbe gut. Dann behalte deine Farbe oder bau mit dem Tailwind-Paletten-Generator eine eigene Skala daraus
Fragen
Wie finde ich die Tailwind-Farbe, die einem HEX-Code am nächsten kommt?
Füge den HEX-Code ins Feld ein und wähle deine Tailwind-Version. Der nächste Farbname steht in der großen Zeile, mit ΔE und einem Farbfeld neben deiner eigenen Farbe.
Warum bekomme ich bei Tailwind 3 und 4 verschiedene Namen?
Tailwind 4 hat seine Palette in OKLCH neu festgelegt, dadurch haben sich die meisten Farben etwas verschoben. #FFC61A liegt zum Beispiel in Tailwind 3 am nächsten an amber-400, in Tailwind 4 an amber-300.
Welches ΔE ist nah genug?
Unter 1 sind die Farben kaum zu unterscheiden. Bis etwa 2 oder 3 passt der Treffer für die meisten bei einem Button oder Hintergrund. Darüber sieht die Tailwind-Farbe merklich anders aus.
Wird meine Farbe irgendwohin geschickt?
Nein. Der Vergleich läuft in deinem Browser, und es wird keine Anfrage mit deiner Farbe gestellt.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten