Tailwind-Paletten-Generator
Erstelle eine Tailwind-Farbpalette aus einer Farbe: eine ganze Skala von 50 bis 950, mit deiner Farbe auf der Stufe, die zu ihrer Helligkeit passt. Kopiere sie für Tailwind 4 als CSS mit OKLCH-Werten oder für Tailwind 3 als Config mit HEX-Codes. Kostenlos und online, in deinem Browser.
So erstellst du eine eigene Farbskala für Tailwind
- 1Gib deine Farbe ein oder wähle sie mit dem Farbwähler
- 2Gib ihr unter „Name der Farbe“ einen Namen, etwa brand
- 3Prüfe die 11 Stufen von 50 bis 950
- 4Kopiere sie für Tailwind 4 (CSS) oder für Tailwind 3 (Config)
- Deine eigene Farbskala, fertig zum Einfügen in Tailwind
Was du bekommst
- Deine Farbe bleibt exakt.Sie landet auf der Stufe, die ihrer Helligkeit am nächsten ist, und ist mit „deine Farbe“ markiert
- Geformt wie bei Tailwind.Die übrigen Stufen folgen der Kurve der nächsten Tailwind-4-Farbe, samt Verschiebung des Farbtons
- Tailwind 4 oder 3.Ein @theme-Block in OKLCH für Tailwind 4, ein colors-Eintrag in HEX für Tailwind 3
Was du tun kannst
- Die 11 Stufen 50, 100, 200 bis 900 und 950 aus einer Farbe bauen, die du eingibst oder wählst
- Der Farbe einen Namen geben, zum Beispiel brand oder accent. Er wird kleingeschrieben und enthält nur Buchstaben, Ziffern und Bindestriche
- Die Skala für Tailwind 4 als @theme-Block mit --color-brand-500 und Co. kopieren, in OKLCH
- Sie für Tailwind 3 als colors-Eintrag für tailwind.config.js kopieren, in HEX
- Den HEX-Code einer einzelnen Stufe mit dem Knopf unter ihrem Farbfeld kopieren
Gut zu wissen
- Tailwind hat keine offizielle Formel für Skalen. Diese übernimmt die Helligkeits- und Buntheitskurve der nächsten Tailwind-Farbe. Sie sieht also aus wie bei Tailwind, ist aber nicht Tailwinds eigene
- Deine Farbe behält ihren genauen Wert. Eine sehr helle Farbe kann auf 50 oder 100 landen, eine sehr dunkle auf 900 oder 950, und die anderen Stufen ordnen sich darum herum
- Stufen außerhalb von sRGB werden auf die CSS-Art zurückgeholt, jeder Wert lässt sich also auf einem normalen Bildschirm zeigen
- Eine Farbe pro Skala. Für eine zweite änderst du Farbe und Namen und kopierst noch einmal
Fragen
Wie füge ich in Tailwind eine eigene Farbe hinzu?
Erstelle hier die Skala und kopiere sie für deine Version. Bei Tailwind 4 kommt der @theme-Block in dein CSS, bei Tailwind 3 der colors-Eintrag unter theme.extend in tailwind.config.js. Dann nutzt du Klassen wie bg-brand-500.
Warum nutzt die Kopie für Tailwind 4 OKLCH?
Tailwind 4 schreibt seine eigenen Standardfarben in OKLCH, deshalb nutzt auch die Kopie für Tailwind 4 oklch(). Die Kopie für Tailwind 3 nutzt HEX.
Warum liegt meine Farbe auf Stufe 600 und nicht auf 500?
Deine Farbe kommt auf die Stufe, deren Helligkeit in Tailwinds Skala ihrer eigenen am nächsten ist. Eine dunklere Farbe landet auf einer höheren Zahl, eine hellere auf einer niedrigeren.
Ist das der offizielle Palettengenerator von Tailwind?
Nein. Tailwind hat keine offizielle Formel, um Skalen zu erzeugen. Dieses Tool folgt den Kurven von Tailwinds eigenen Farben, um ihnen nahezukommen.
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