Dateien bleiben auf deinem Gerät Kein Wasserzeichen Funktioniert offline
Für Unternehmen

Tailwind-Farbe in HEX

Tailwind-Farbe in HEX umwandeln, kostenlos und online. Gib einen Namen wie sky-500 oder eine ganze Klasse wie bg-rose-300 ein und du bekommst den HEX-Code aus der Standardpalette von Tailwind 4 oder Tailwind 3. Praktisch für Figma, E-Mails, Diagramme und überall, wo keine Tailwind-Klassen wirken.

So bekommst du den HEX-Code einer Tailwind-Farbe

  1. 1Wähle unter „Tailwind-Version“ Tailwind 4 oder Tailwind 3
  2. 2Tippe eine Farbe wie sky-500 oder bg-rose-300 in „Farbe“
  3. 3Kopiere den HEX-Code aus der großen Zeile
  4. Der HEX-Code, etwa #00A6F4 für sky-500 in Tailwind 4

Bevor du kopierst

  • Klasse einfach einfügen.bg-, text-, border- und Ähnliches, hover: und md: sowie /50 werden abgetrennt
  • Version 4 oder 3.Die Paletten unterscheiden sich: sky-500 ist in Tailwind 4 #00A6F4, in Tailwind 3 #0EA5E9
  • Nichts wird verschickt.Die Paletten sind Teil der Seite, nachgeschlagen wird in deinem Browser

Was du tun kannst

  • Jede Standardfarbe von Tailwind nachschlagen: 22 Paletten von slate bis rose, Stufen 50 bis 950
  • Sie so eingeben, wie sie im Markup steht: sky-500, bg-sky-500, hover:text-sky-500/50 oder sky 500
  • Zwischen Tailwind 4 und Tailwind 3 wechseln und sofort sehen, wie sich der HEX-Code ändert
  • rgb(), hsl() oder oklch() derselben Farbe aus der Liste kopieren. Bei Tailwind 4 zeigt die OKLCH-Zeile den Wert so, wie Tailwind ihn festlegt
  • Eine klare Meldung bekommen, wenn es den Namen nicht gibt, etwa sky-550

Gut zu wissen

  • Tailwind 4 legt seine Farben in OKLCH fest, und viele davon, etwa amber-400 und sky-500, liegen außerhalb von sRGB. HEX zeigt dann die nächste sRGB-Farbe, und die Seite weist darauf hin
  • Für eine genaue Tailwind-4-Farbe in CSS kopierst du besser die oklch()-Zeile als den HEX-Code
  • Deckkraft wie /50 wird übergangen, weil ein HEX-Code hier keine Transparenz hat
  • Bekannt ist nur die Standardpalette aus Tailwind 4.1.11 und 3.4.17. Eigene Theme-Farben sowie Schwarz und Weiß sind nicht dabei

Fragen

Welchen HEX-Code hat eine Tailwind-Farbe?

Gib den Namen ein, zum Beispiel blue-600, und wähle deine Version. In Tailwind 3 ist blue-600 #2563EB, in Tailwind 4 #155DFC.

Warum gibt Tailwind 4 einen anderen HEX-Code als Tailwind 3?

Tailwind 4 hat seine Palette in OKLCH mit kräftigeren Farben neu festgelegt. Viele davon gehen über das hinaus, was HEX fassen kann, deshalb ist der HEX-Code die nächste sRGB-Farbe und nicht die genaue.

Kann ich eine ganze Klasse wie hover:bg-sky-500/75 einfügen?

Ja. Varianten wie hover: und md:, die Utility wie bg- oder text- und die Deckkraft nach dem Schrägstrich werden weggelassen. Gelesen werden nur Farbname und Stufe.

Kennt die Seite meine eigenen Farben?

Nein. Sie kennt nur die Standardpaletten von Tailwind 4 und 3. Ein Name aus deinem eigenen Theme wie brand-500 bekommt die Meldung, dass es keine Tailwind-Farbe mit diesem Namen gibt.

Verwandte Tools

Weitere Tools in „Web & Code“

Alle Tools in „Web & Code“

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.

Datei hierher ziehen

Eine eingefügte Datei geht auch.

oder such ein Tool

Eine App öffnen

So funktioniert's

Von „uff, diese Datei“ zu erledigt, in drei Schritten.

  1. 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.

  2. Wähl, was du willst

    Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.

  3. Mach ein Rezept daraus

    Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.

Für Unternehmen

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.

Kennenlerngespräch planen Was Unternehmen bekommen
  • Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
  • Firmenrezepte, die alle gleich ausführen
  • Ein Ort statt zehn Konverter-Seiten

So funktioniert's

Kleine Tools, die in deinem Browser laufen.

Was wo läuft

Dein Browser speichert die Tools, die du nutzt: dieselbe Art Tools, die du sonst auf einer Website nutzen würdest. Deine Dateien bleiben auf deinem Gerät und werden nicht hochgeladen.

Ein Tool, das dein Browser gespeichert hat, funktioniert auch ohne Internet. Unter Offline, ganz unten auf dieser Seite, kannst du alles auf einmal speichern. Dann läuft die Seite auch ohne Verbindung.

Manche Tools haben KI eingebaut, zum Beispiel, um einen Hintergrund zu entfernen oder ein Foto zu vergrößern. Ihre KI-Modelle lädt dein Browser einmal von ToolRecipe selbst herunter und führt sie dann auf deinem Gerät aus. Kein Tool schickt deine Dateien an einen KI-Dienst im Internet oder an uns.

Am Computer nutzen diese Tools den Grafikchip, wenn er eine kurze Prüfung besteht, weil das meist schneller ist. Am Handy laufen sie auf dem Prozessor, mit Einstellungen, die zum Speicher eines Handys passen.

Ein Tool benutzen

Gib dem Tool deine Datei, wähl aus, was du willst, und speichere das Ergebnis.

  • Auf der Startseite beginnen

    Zieh eine Datei in das Feld auf der Startseite oder probier es mit einem Beispielfoto. Wähl aus, was du tun willst, und drück auf „Werkzeug öffnen“. Das Tool öffnet sich mit deiner Datei.

  • Datei hineingeben

    Zieh sie irgendwo auf die Seite, wähle sie mit „Datei auswählen“ oder füge sie ein. Noch keine Datei? Such nach der Aufgabe, etwa „heic in jpg“.

  • Einstellungen wählen

    Jedes Tool zeigt nur die Einstellungen, die es braucht. Oft reicht ein Klick.

  • Ergebnis speichern

    Gespeicherte Dateien landen in deinen Downloads. Eine Kopie wartet außerdem unter Ergebnisse.

  • Ergebnisse

    Der Reiter Ergebnisse am rechten Rand hält deine letzten Ergebnisse in diesem Browser, bis du sie entfernst. Mit „Alle entfernen“ leerst du ihn.

Tools verketten

Was ein Tool macht, kann direkt ins nächste Tool, ohne dass du es speicherst und neu öffnest.

  • „Verwenden in“

    Tippe unter Ergebnisse auf ein Ergebnis und wähle bei „Verwenden in“ ein Tool. Das Ergebnis geht an dieses Tool weiter.

  • Ziehen

    Du kannst ein Ergebnis auch auf ein offenes Tool ziehen. Am Handy hältst du es dafür kurz gedrückt.

  • Von der Kette zum Rezept

    Willst du dieselben Tools später wieder nutzen, mach im Rezept-Baukasten ein Rezept daraus.

Der Rezept-Baukasten

Zieh eine Datei in das Feld auf der Startseite und füg die Schritte einzeln hinzu. Es läuft erst etwas, wenn du auf „Rezept ausführen“ oder „Werkzeug öffnen“ drückst.

  • Aufgabe wählen

    Das Feld zeigt eine Kachel für jede Art von Aufgabe, die mit deiner Datei geht, etwa „Kleiner machen“. Eine Kachel öffnet fertige Optionen und alle Tools dieser Art. Mit „Zurück“ kommst du wieder zu den Kacheln.

  • Schritte hinzufügen

    Jede Auswahl wird zu einem nummerierten Schritt in der Reihe oben. „Noch einen Schritt hinzufügen“ zeigt zuerst Vorschläge für den nächsten Schritt, darunter die Kacheln für das, was der letzte Schritt macht. Das Kreuz an einem Schritt nimmt ihn heraus, „Rückgängig“ holt ihn zurück.

  • Einen Namen geben

    Das Rezept heißt „Mein Rezept“, bis du ihm einen Namen gibst. Drück auf den Stift neben dem Namen, um ihn zu ändern.

  • Ausführen

    Bei einem Schritt drückst du auf „Werkzeug öffnen“, und das Tool öffnet sich mit deiner Datei. Ab zwei Schritten drückst du auf „Rezept ausführen“. Das Rezept öffnet sich in einer eigenen Ansicht, und die Schritte laufen nacheinander ab.

  • Schritte, die dich brauchen

    Die meisten Schritte laufen von selbst. Ein Schritt mit „Du bist dran“ wartet auf dich, zum Beispiel wenn du ein PDF unterschreiben musst. Bist du fertig, drück auf „Weiter zum nächsten Schritt“, beim letzten Schritt auf „Ergebnis ansehen“.

  • Speichern oder neu beginnen

    „Die aktuellen Schritte als Rezept speichern“ legt die Schritte unter „Meine Rezepte“ ab. Ausführen musst du sie dafür nicht. In der Rezeptansicht geht das auch mit „Dieses Rezept speichern“ unter den Schritten. „Neu beginnen“ leert das Feld für eine andere Datei.

Rezepte

Ein Rezept sind ein paar Tools hintereinander: Was ein Schritt macht, geht in den nächsten.

  • Fertige Rezepte

    „Alle Rezepte“ im Menü zeigt Rezepte für häufige Aufgaben. Zieh deine Datei auf eines, dann läuft es Schritt für Schritt.

  • Eigene erstellen

    Bau eines im Feld auf der Startseite. Unter „Meine Rezepte“ öffnet „Neues Rezept“ denselben Baukasten oben auf der Seite, mit einem Suchfeld für das Tool, das du als Nächstes brauchst.

  • Meine Rezepte

    Deine gespeicherten Rezepte findest du im Menü unter „Meine Rezepte“, in diesem Browser. Öffne eines, um es umzubenennen oder seine Schritte zu ändern. Änderungen werden sofort gespeichert. „Mit einer Datei starten“ führt es mit einer neuen Datei aus. „Löschen“ fragt erst nach und löscht es dann.

  • Rezept teilen

    „Link zum Teilen kopieren“ macht einen Link zu den Schritten, nie zu deinen Dateien. Wer ihn öffnet, wählt erst eine eigene Datei, vorher startet nichts.

So arbeitest du

Tools und Rezepte laufen in deinem Browser, auf deinem Gerät.

  • Mit einer Datei anfangen

    Zieh sie in das Feld auf der Startseite und wähl aus, was du tun willst. Wähl einen Schritt, um sein Tool zu öffnen, oder füg weitere hinzu, dann wird es ein Rezept.

  • Mit einem Tool anfangen

    Such nach der Aufgabe oder öffne ein Tool über das Menü. Ist das Ergebnis fertig, tippe es unter Ergebnisse an und wähle bei „Verwenden in“ das nächste Tool.

  • Schritte behalten

    Ein gespeichertes Rezept behält seinen Namen, seine Tools in der richtigen Reihenfolge und die Einstellung jedes Schritts. Deine Dateien und ihre Namen behält es nie.

  • Später weitermachen

    Öffne „Meine Rezepte“ im selben Browser auf demselben Gerät und führ ein Rezept mit einer neuen Datei aus. Ein Rezept bleibt dort, bis du es löschst oder deine Browserdaten entfernst.

Tools wiederfinden

Jedes Tool und jedes Rezept hat eine eigene Adresse.

  • Als Lesezeichen speichern

    Drück auf der Seite eines Tools Strg+D (⌘D am Mac), dann landet es in den Lesezeichen deines Browsers.

  • Auf dem Homescreen

    Ein Tool kann wie eine App auf dem Homescreen deines Handys liegen. Wie das geht, steht weiter unten bei Installieren.

  • Deine eigenen Rezepte

    Gespeicherte Rezepte findest du im Menü unter „Meine Rezepte“.

  • Die Sterne

    Die Sterne unter einem neuen Ergebnis fragen, wie gut das Tool funktioniert hat. Deine Antwort hilft uns, es zu verbessern. Gespeichert wird das Tool dadurch nicht.

Wer nutzt was

Tool-Sets für häufige Aufgaben.

Ein Tool auf den Home-Bildschirm legen

Das Symbol öffnet das Tool wie eine App.

iPhone und iPad

  1. Öffne das Tool in Safari
  2. Tippe auf Teilen (das Quadrat mit dem Pfeil)
  3. Wähle „Zum Home-Bildschirm“, dann „Hinzufügen“

Android

  1. Öffne das Tool in Chrome
  2. Tippe oben rechts auf das Menü (⋮)
  3. Wähle „Zum Startbildschirm hinzufügen“ oder „App installieren“

Computer

  1. Öffne das Tool in Chrome oder Edge
  2. Klick auf das Installieren-Symbol in der Adressleiste
  3. Wähle Installieren

Zu den Updates

Wir versuchen, regelmäßig Updates und neue Tools zu veröffentlichen.

So prüfst du, dass Dateien hier bleiben

Die Tools lesen deine Dateien und machen das Ergebnis in diesem Browser, auf deinem Gerät. Deine Dateien werden dafür nicht hochgeladen.

Eine Sicherheitsrichtlinie erlaubt dieser Seite nur eine Adresse: unseren eigenen Server, für Zählungen. Er gibt Seitenaufrufe und eine feste Liste von Aktionen an einen Statistikdienst in der EU weiter, der sie für uns zählt. Keiner von beiden bekommt deine Dateien oder deren Namen. Alles andere wird blockiert, und das Abzeichen oben wird rot und zählt mit.

Wenn ein Tool scheitert, zählt die Seite auch das: nur die Art des Fehlers und wo in unserem Code er passiert ist, nie den Text der Fehlermeldung, deine Dateien oder was du eingegeben hast.

Wenn du uns deine E-Mail-Adresse schickst, um nach ToolRecipe für Unternehmen zu fragen, speichern wir sie mit dieser Anfrage bei unserem Statistikdienst in der EU und erhalten sie per E-Mail, um dir zu antworten. Schreib an info@toolrecipe.com, wenn wir sie löschen sollen.

Ergebnisse bleiben in diesem Browser, bis du sie entfernst.

Funktioniert offline

Diese Seite ist auf diesem Gerät gespeichert und öffnet sich auch ohne Verbindung. Große Werkzeuge werden bei der ersten Verwendung gespeichert.

Skills

Claude-Skills, die wir selbst nutzen, je eine Aufgabe.