CSS Farben zu Tailwind – Palette, Tokens und Hex-Werte

Bekannte Hex-Werte mapen auf text-gray-900. Unbekannt: bg-[#1a2b3c].

Trifft ein Hex-Wert die Standardpalette, entsteht ein sauberes Token wie text-gray-900. Markenfarben passen dagegen fast nie und werden als bg-[#1a2b3c] geschrieben. Das ist der ehrlichere Weg, denn das Runden auf den nächstliegenden Farbton verändert die Marke sichtbar. Wiederkehrende Farben gehören stattdessen als eigene Tokens in die Konfiguration.

Marken-Hex

#111827 liegt oft nahe gray-900; einzigartiges Marken-Hex wird oft text-[#…] oder bg-[#…].

Deckkraft

rgba und /opacity werden zu /50 oder bg-black/50. Kontrast nach Konvertierung prüfen.

Theme-Variablen

Lebt die Farbe in :root, Wert auflösen, bevor Sie einen Named Token erwarten.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.