DevBentoTailwind CSS Farbe zu HEX: Farben-Nachschlagewerk
Schlage Tailwind CSS Farbnamen nach und erhalte sofort ihre HEX-Werte. blue-500 ist #3b82f6, gray-900 ist #111827. Schnellreferenz aller Tailwind-Farben.
#3b82f6rgb(59, 130, 246)hsl(217, 91%, 60%)hsb(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)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.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.