Tailwind Farb-Spickzettel
Durchsuchen Sie jede Standardfarbe von Tailwind CSS (Schiefer → Rose, 50 → 900) und kopieren Sie jeden Hexwert mit einem Klick.
Kurze Antwort: Tailwind Farb-Spickzettel: Durchsuche alle Standardfarben von Tailwind CSS (Schiefer → Rose, 50 → 900) und kopiere jeden Hex-Code mit nur einem Klick. Läuft vollständig in deinem Browser, kostenlos, keine Anmeldung nötig.
Zuletzt aktualisiert
Gut zu wissen
Tailwind's default palette is deliberately perceptual: each named ramp runs from 50 (near-white) to 950 (near-black), and the numbers are tuned so that a step of 100 feels like roughly the same jump in lightness across every hue. That is why slate-200 and blue-200 read as the same weight even though the underlying hex values are unrelated — handy when you are building a UI that stays balanced as you swap accent colors.
A practical convention that saves a lot of back-and-forth: pick your text and background from opposite ends of the same or a neighboring ramp. Body text on slate-900 over a slate-50 card almost always clears WCAG AA, whereas mid-tones like 400 on 300 rarely do. When you are unsure, copy the two hex values here and drop them into our contrast checker before committing them to a design system.
The class label next to every swatch is the copy target you actually want: knowing a shade is emerald-500 lets you type the utility directly (bg-emerald-500, text-emerald-500) instead of pasting a raw hex and losing Tailwind's dark-mode and opacity modifiers. Reach for the hex only when you are working outside Tailwind — an email template, an SVG fill, or a native app style sheet.
One caveat: this is the stock v3/v4 default theme. If your project overrides theme.colors or uses the older v2 ramp (which stopped at 900), the names will match but the hex values may not. Treat the cheatsheet as the baseline, then verify against your own tailwind.config when a color looks off.
Häufig gestellte Fragen
- Ist das Cheatsheet kostenlos?
- Ja — kostenlos, ohne Anmeldung.
- Von welcher Tailwind-Version stammen diese?
- Tailwind v3 Standard-Palette — die Version, die überall noch aktiv verwendet wird.
- Kann ich mehr als nur den Hex-Wert kopieren?
- Das Label enthält den Tailwind-Klassennamen (z.B. blue-500), damit du genau weißt, welche Utility diese Farbe erzeugt.
- Sind das die gleichen wie in v4?
- Tailwind v4 behält standardmäßig die gleiche Palette bei. Benutzerdefinierte Themenüberschreibungen werden hier nicht dargestellt.
- Wird irgendetwas hochgeladen?
- Nein — jede Palette ist in die Seite integriert.