AZ Tools

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.

Copiar:

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

  1. Elige formato de copia — Class para utilities Tailwind, HEX para herramientas de diseño, rgb() para variables CSS.
  2. Haz clic en cualquier swatch para copiar su valor. Una marca de verificación confirma brevemente.
  3. 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