Tailwind CSS Farbe zu HEX Nachschlagewerk
blue-500 ist #3b82f6, was rgb(59, 130, 246) entspricht. Das Farbsystem von Tailwind verwendet eine feste Palette benannter Farben mit nummerierten Abstufungen von 50 bis 950. Jede Abstufung wird auf einen bestimmten Hex-Wert abgebildet, der innerhalb derselben Hauptversion zwischen Tailwind-Versionen konsistent ist.
Die Struktur der Farbskala
Jede Tailwind-Farbfamilie verwendet dieselbe numerische Skala. Die Zahlen repräsentieren die Helligkeit in einer annähernd linearen Progression:
| Stufe | Typische Verwendung |
|---|---|
| 50 | Sehr helle Hintergründe, Hover-Tönungen |
| 100 | Helle Hintergründe, ausgewählte Zustände |
| 200 | Rahmen, Trennlinien |
| 300 | Deaktivierte Zustände, Platzhaltertext |
| 400 | Sekundärtext, Symbole |
| 500 | Reiner Farbton, interaktive Elemente |
| 600 | Hover-Zustände für 500-Elemente |
| 700 | Text auf hellen Hintergründen |
| 800 | Überschriftentext |
| 900 | Hochkontrasttext |
| 950 | Fast schwarz, hinzugefügt in Tailwind v3.3 |
Häufige Farben mit HEX-Werten
Eine Referenz der in der Praxis am häufigsten verwendeten Abstufungen:
| Tailwind-Name | HEX | RGB |
|---|---|---|
| blue-50 | #eff6ff | rgb(239, 246, 255) |
| blue-100 | #dbeafe | rgb(219, 234, 254) |
| blue-500 | #3b82f6 | rgb(59, 130, 246) |
| blue-600 | #2563eb | rgb(37, 99, 235) |
| blue-700 | #1d4ed8 | rgb(29, 78, 216) |
| blue-900 | #1e3a8a | rgb(30, 58, 138) |
| slate-900 | #0f172a | rgb(15, 23, 42) |
| gray-900 | #111827 | rgb(17, 24, 39) |
| zinc-900 | #18181b | rgb(24, 24, 27) |
| neutral-900 | #171717 | rgb(23, 23, 23) |
| stone-900 | #1c1917 | rgb(28, 25, 23) |
| red-500 | #ef4444 | rgb(239, 68, 68) |
| green-500 | #22c55e | rgb(34, 197, 94) |
| yellow-500 | #eab308 | rgb(234, 179, 8) |
| purple-500 | #a855f7 | rgb(168, 85, 247) |
| pink-500 | #ec4899 | rgb(236, 72, 153) |
| white | #ffffff | rgb(255, 255, 255) |
| black | #000000 | rgb(0, 0, 0) |
Die Graufamilien im Vergleich
Tailwind enthält fünf Graufamilien mit unterschiedlichen Untertönen. Slate (kühl, blaustichig) ist der Standard für die meisten Tailwind-Installationen und der empfohlene Ausgangspunkt.
- Slate: kühler blauer Unterton, Standard in Tailwind
- Gray: neutraler mit leichtem Blaustich
- Zinc: neutral, fast ohne Farbstich
- Neutral: der Grauton, der reinem Grau am nächsten kommt
- Stone: warmer gelber/brauner Unterton
Wähle eine Familie basierend auf der Farbtemperatur deines Designs. Kühle Töne passen zu Blau/Grün-Paletten, warme Töne zu Rot/Gelb/Orange-Paletten.