HEX-Farbe in Tailwind-Klasse
Tippe oder wähle die Markenfarbe. Das Tool vergleicht sie mit den 242 Farben der Tailwind-Standardpalette und zeigt die ähnlichsten, mit der fertigen Klasse zum Kopieren.
So geht’sWelche Tailwind-Farbe ist am nächsten
Verfügbar auf: 
HEX-Farbe in Tailwind-Klasse: wofür es gut ist
Wer Tailwind CSS nutzt und die Markenfarbe in HEX bekommt, will wissen, welche Farbe der Standardpalette am nächsten kommt, um den Code nicht mit Klammerwerten zu füllen.
Das Tool vergleicht deine Farbe mit den 242 Farben der Tailwind-3-Palette (von slate bis rose, Töne 50 bis 950, plus Weiß und Schwarz) anhand des Abstands im OKLab-Raum, der der Wahrnehmung des Auges folgt. Es zeigt die fünf ähnlichsten, mit fertiger Klasse, und warnt, wenn keine ähnlich genug ist.
So geht’s
- Füge die Farbe in HEX oder rgb() ein oder wähle sie im Farbwähler.
- Wähle das Präfix der Klasse (bg, text, border …).
- Kopiere die Klasse der nächsten Farbe oder den exakten Wert.
Wann nutzen
- Die Markenfarbe an ein Tailwind-Projekt anpassen.
- Ein Layout aus Figma in Klassen umwandeln.
- Entscheiden, ob sich eine neue Farbe im Theme lohnt.
Häufige Fragen
Wie wird die nächste Farbe gewählt?
Über den Farbabstand im OKLab-Raum, der die Wahrnehmung des menschlichen Auges besser abbildet als ein Vergleich der RGB-Zahlen. Je kleiner der Abstand, desto ähnlicher die Farben.
Und wenn keine ähnlich ist?
Nutze den exakten Wert mit Klammern, wie bg-[#1f6feb], oder trage die Markenfarbe im Theme (theme.extend.colors in der tailwind.config oder @theme in Tailwind 4) mit einem Namen wie brand ein.
Ist die Palette die von Tailwind 3 oder 4?
Der Vergleich nutzt die HEX-Werte der Standardpalette von Tailwind 3. Tailwind 4 hat dieselben Farben in OKLCH definiert, mit etwas kräftigeren Tönen, aber die Namen (blue-600, red-500 …) sind dieselben.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.