¿Qué es Colores de Tailwind CSS?

Colores de Tailwind CSS es una herramienta de referencia completa que proporciona acceso instantáneo a la paleta de colores completa de Tailwind CSS. Explora, busca y copia entre 242 colores cuidadosamente diseñados en 22 familias de colores, cada una con 11 tonos que van desde 50 (más claro) hasta 950 (más oscuro).

Colores Neutros (5)

Slate, Gray, Zinc, Neutral y Stone - perfectos para texto, fondos y bordes con variaciones sutiles en calidez y tono.

Colores con Matiz (17)

Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink y Rose para elementos de interfaz vibrantes.

Acceso Rápido: No más cambios a la documentación. Copia cualquier valor de color - ya sean nombres de clases como bg-blue-500 o valores HEX sin procesar como #3b82f6 - con solo un clic.

Cómo Usar

Explorar Colores

La cuadrícula de colores muestra las 22 familias de colores en un diseño organizado. Cada fila muestra el nombre de una familia a la izquierda y sus 11 tonos desde el más claro (50) hasta el más oscuro (950). Simplemente pasa el cursor sobre cualquier color para ver su número de tono y valor HEX al instante.

Buscar Colores

Usa el cuadro de búsqueda para encontrar colores rápidamente por:

Nombre de familia: Escribe "blue", "slate" o "emerald"
Valor HEX: Ingresa "#3b82f6" o simplemente "3b82f6"

Los resultados se filtran en tiempo real mientras escribes.

Filtrar por Categoría

Usa el menú desplegable de filtros para reducir tu vista:

Todos los Colores: Paleta completa (22 familias)
Colores con Matiz: Solo colores cromáticos (17 familias)
Neutros: Variantes en escala de grises (5 familias)

Copiar Colores

Selecciona tu formato preferido del menú desplegable, luego haz clic en cualquier color para copiar al instante:

Formato	Ejemplo	Mejor Para
Nombre de Clase	`bg-blue-500`	HTML/JSX de Tailwind
HEX	`#3b82f6`	CSS, Herramientas de Diseño
RGB	`rgb(59, 130, 246)`	rgba() de CSS, JavaScript
HSL	`hsl(217, 91%, 60%)`	Manipulación de Color

Ver Detalles del Color

Haz doble clic en cualquier color para abrir el modal de detalles. Aquí puedes ver todos los valores de formato a la vez, copiar valores individuales con botones dedicados y navegar a tonos relacionados dentro de la misma familia de colores.

Características

Paleta de Colores Completa

Accede a los 242 colores de la paleta oficial de Tailwind CSS. El diseño de cuadrícula facilita comparar tonos dentro de una familia y encontrar el color perfecto para tu proyecto.

22 familias de colores
11 tonos por familia
Comparación visual fácil

Múltiples Formatos de Copia

Copia colores en el formato exacto que necesitas para tu flujo de trabajo:

Nombre de Clase: Listo para HTML (bg-blue-500)
HEX: Para CSS y herramientas de diseño
RGB: Para funciones rgba()
HSL: Para manipulación de color

Sistema de Favoritos

Guarda los colores que usas con frecuencia en tu lista de favoritos. Haz clic en el ícono de estrella en cualquier color para agregarlo. Tus favoritos se almacenan localmente y persisten entre sesiones.

Favoritos con un clic
Almacenamiento persistente
Panel de acceso rápido

Exportar como Variables CSS

Exporta todos tus colores favoritos como propiedades personalizadas de CSS con un clic. Perfecto para crear una paleta de colores personalizada para tu proyecto que esté lista para usar en tus hojas de estilo.

Exportación CSS con un clic
Formato de propiedad personalizada
Código listo para el proyecto

Haz doble clic en cualquier color para ver información completa que incluye todos los valores de formato y acceso rápido a tonos relacionados en la misma familia.

Todos los formatos a la vez
Botones de copia individuales
Navegación de tonos relacionados

Búsqueda Inteligente

Encuentra colores al instante escribiendo el nombre de la familia o el valor HEX. La búsqueda filtra la cuadrícula en tiempo real mientras escribes, haciendo que el descubrimiento de colores sea rápido e intuitivo.

Filtrado en tiempo real
Búsqueda por nombre de familia
Búsqueda por valor HEX

Tus Datos se Mantienen Privados: Todo el procesamiento ocurre en tu navegador. Sin solicitudes al servidor para datos de colores, favoritos guardados localmente usando localStorage del navegador, y funciona completamente sin conexión después de la carga inicial.

Preguntas Frecuentes

¿Qué versión de colores de Tailwind CSS usa esto?

Esta herramienta usa la paleta de colores oficial de Tailwind CSS v4, que incluye las 22 familias de colores con 11 tonos cada una (del 50 al 950). Esto asegura que estés trabajando con los valores de color más actuales y precisos del framework Tailwind.

¿Cuál es la diferencia entre los colores neutros?

Tailwind proporciona 5 familias de colores neutros con diferencias sutiles pero importantes en tono y calidez:

Slate: Gris frío con un ligero tinte azul - moderno y nítido
Gray: Gris neutral puro - equilibrado y versátil
Zinc: Gris frío, ligeramente más cálido que Slate - sensación contemporánea
Neutral: Verdadero neutral sin matiz de color - perfectamente equilibrado
Stone: Gris cálido con un ligero tinte marrón - orgánico y natural

Elige según la temperatura general y la estética de tu diseño. Los grises fríos (Slate, Zinc) funcionan bien con azules y diseños modernos, mientras que los grises cálidos (Stone) complementan tonos terrosos.

¿Cómo uso el nombre de clase copiado?

El formato de nombre de clase (por ejemplo, bg-blue-500) está listo para usar directamente en tu HTML con Tailwind CSS. Simplemente agrégalo al atributo class de tu elemento:

Ejemplo HTML

<div class="bg-blue-500 text-white p-4">
  Hello World
</div>

Prefijos comunes:

bg- para colores de fondo
text- para colores de texto
border- para colores de borde
ring- para colores de anillo

¿Puedo usar estos colores sin Tailwind CSS?

¡Por supuesto! Copia los valores HEX, RGB o HSL para usar en cualquier archivo CSS, herramienta de diseño o aplicación. Los colores funcionan independientemente del framework Tailwind.

Ejemplo CSS

.my-button {
  background-color: #3b82f6;
  color: #ffffff;
  border: 2px solid rgb(59, 130, 246);
}

Estos colores también son perfectos para herramientas de diseño como Figma, Adobe XD, Sketch o cualquier aplicación que acepte formatos de color estándar.

¿Se guardan mis favoritos?

¡Sí! Los favoritos se guardan en el localStorage de tu navegador. Persistirán entre sesiones en el mismo dispositivo y navegador, por lo que puedes cerrar la pestaña y volver más tarde para encontrar tus favoritos intactos.

Importante: Borrar los datos del navegador o usar el modo privado/incógnito eliminará los favoritos guardados. Considera exportar tus favoritos como variables CSS para respaldo.

¿Cómo exporto mi paleta de colores?

Exportar tu paleta de colores personalizada es simple:

Agrega colores a tus favoritos haciendo clic en el ícono de estrella
Abre el panel de favoritos
Haz clic en el botón "Exportar CSS"
Pega las propiedades personalizadas CSS copiadas en tu hoja de estilos

Ejemplo de CSS Exportado

:root {
  --color-blue-500: #3b82f6;
  --color-emerald-600: #059669;
  --color-slate-700: #334155;
}

Luego puedes usar estas variables en todo tu CSS: background-color: var(--color-blue-500);