Tailwind Kleur Cheatsheet
Blader door elke standaard Tailwind CSS kleur (slate → rose, 50 → 900) en kopieer elke hex met één klik.
Snel antwoord: Tailwind-kleurenoverzicht: bekijk alle standaardkleuren van Tailwind CSS (leisteen → roos, 50 → 900) en kopieer elke hexcode met één klik. Werkt volledig in je browser, gratis en zonder registratie.
Laatst bijgewerkt
Goed om te weten
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.
Veelgestelde vragen
- Is het cheatsheet gratis?
- Ja — gratis zonder registratie.
- Van welke Tailwind versie zijn deze?
- Tailwind v3 standaard palet — de versie die overal nog actief in gebruik is.
- Kan ik meer kopiëren dan alleen de hex?
- Het label bevat de Tailwind class naam (bijv. blue-500) zodat je precies weet welke utility die kleur produceert.
- Zijn deze hetzelfde als v4?
- Tailwind v4 behoudt standaard hetzelfde palet. Aangepaste thema overrides zijn hier niet vertegenwoordigd.
- Is er iets geüpload?
- Nee — elk palet is ingebouwd in de pagina.