¿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.

Paleta de Colores Tailwind

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

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

Ordenar Colores

Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.

Color 0 0

Generador de Tintes y Sombras

Genera tintes (más claros), sombras (más oscuros) y tonos (con gris) desde cualquier color base — 2 a 20 pasos, en HEX, RGB o HSL.

Color 0 0

Generador de Paleta de Colores

Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.

Color 0 0

Paleta de Color desde Imagen

Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.

Color 0 0

Exportador de Tokens de Color

Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.

Color 0 0

Buscador de nombre de color

Encuentra el nombre de color CSS, Tailwind o XKCD más cercano a cualquier hex/RGB — ordenado por distancia perceptual en el espacio OKLab.

Color 0 0