Paleta de Colores Tailwind
Color
Referencia visual de toda la paleta por defecto de Tailwind (v3.4 y v4 comparten los mismos valores). Cada swatch muestra número de sombra y HEX, con un toggle de modo de copia para obtener el valor en la forma que tu codebase quiera: `bg-slate-700`, `#334155` o `rgb(51, 65, 85)`. La búsqueda filtra por nombre de matiz o substring HEX.
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Valores de tema por defecto para Tailwind CSS v3.4 / v4.
Cómo usar
- Elige formato de copia — Class para utilities Tailwind, HEX para herramientas de diseño, rgb() para variables CSS.
- Haz clic en cualquier swatch para copiar su valor. Una marca de verificación confirma brevemente.
- Escribe un matiz (`emerald`) o fragmento HEX (`fde0`) para filtrar.
Preguntas frecuentes
- ¿Coincide con Tailwind v4?
- Sí — el tema por defecto de v4 mantiene los mismos valores de matiz/sombra que v3.4, así que la paleta es idéntica. Si has personalizado `theme.colors` en tu config, la paleta de tu proyecto puede diferir.
- ¿Por qué hay cinco grises?
- Tailwind trae slate / gray / zinc / neutral / stone como cinco matices neutros con undertones ligeramente diferentes: slate tiende a azul frío, gray es neutro, zinc es más frío/acerado, neutral es neutro puro, stone es taupe cálido. Elige el que mejor combine con tu acento.
- ¿Qué significa sombra 950?
- Tailwind añadió un paso 950 más oscuro en v3.3 junto a la escalera 50–900 existente. Es casi negro con un tenue tinte del matiz, útil para fondos oscuros profundos y bordes muy sutiles.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Conversor de Formatos de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV, OKLCH y una variable CSS.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.