Hoja de Referencia de Color de Tailwind
Navega por cada color predeterminado de Tailwind CSS (pizarra → rosa, 50 → 900) y copia cualquier hex con un clic.
Respuesta rápida: Hoja de Referencia de Color de Tailwind: consulta todos los colores predeterminados de Tailwind CSS (pizarra → rosa, 50 → 900) y copia cualquier código hexadecimal con un clic. Funciona íntegramente en tu navegador, gratis y sin registro.
Última actualización
Bueno saber
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.
Preguntas frecuentes
- ¿Es la hoja de trucos gratuita?
- Sí, es gratuita y no requiere registro.
- ¿De qué versión de Tailwind son estos colores?
- Paleta predeterminada de Tailwind v3 — la versión que todavía se utiliza activamente en todos lados.
- ¿Puedo copiar más que el hex?
- La etiqueta incluye el nombre de la clase de Tailwind (por ejemplo, blue-500) para que sepas exactamente qué utilidad produce ese color.
- ¿Son estos los mismos que v4?
- Tailwind v4 mantiene la misma paleta por defecto. Las personalizaciones del tema no están representadas aquí.
- ¿Se sube algo?
- No — cada paleta está incorporada en la página.