Referencia de la paleta de colores de Tailwind CSS
Los colores de Tailwind están todos aquí, en una sola cuadrícula con búsqueda: los 242 valores de las 22 familias, cada una con 11 tonos del 50 (el más claro) al 950 (el más oscuro). Haz clic en cualquier muestra para copiar al instante su nombre de clase o su valor de color, sin volver a la documentación.
La paleta se divide en 5 familias neutras (Slate, Gray, Zinc, Neutral, Stone) para textos, fondos y bordes, más 17 familias con tono desde Red hasta Rose para acentos y temas. Está pensada para desarrolladores front-end y diseñadores que quieren explorar rápido, consultar un código HEX y tomar el valor exacto que necesitan.
Cómo usarlo
Explora la cuadrícula
Cada fila muestra el nombre de una familia a la izquierda y sus 11 tonos, del más claro (50) al más oscuro (950). Pasa el cursor sobre cualquier muestra para ver su número de tono y su valor HEX.
Busca y filtra
Escribe el nombre de una familia como blue o un valor HEX como #3b82f6 para filtrar a medida que escribes. Usa el menú de filtro para mostrar solo Todos los colores, Colores con tono o Neutros.
Elige un formato y copia
Elige Nombre de clase, HEX, RGB o HSL en el menú de formato y luego haz clic en cualquier muestra para copiar ese valor al portapapeles.
Abre la vista de detalle
Haz doble clic en una muestra para abrir la ventana de detalle. Verás el nombre de clase, HEX, RGB y HSL a la vez, podrás copiar cualquiera de ellos y saltar a otros tonos de la misma familia.
Guarda y exporta favoritos
Haz clic en la estrella de cualquier muestra para añadirla a tus favoritos. Abre el panel de favoritos y usa Exportar CSS para copiar cada favorito como un conjunto de propiedades personalizadas de CSS listo para pegar en tu hoja de estilos.
Funciones
Paleta de colores completa
Los 242 colores de Tailwind en una sola cuadrícula —22 familias con 11 tonos cada una— dispuestos para que compares los tonos dentro de una familia de un vistazo.
Varios formatos para copiar
Copia un color como nombre de clase (bg-blue-500), HEX, RGB o HSL: elige el formato en un menú y haz clic para copiar.
Sistema de favoritos
Marca con una estrella los colores que más usas. Los favoritos se guardan en el almacenamiento local de tu navegador, así que se conservan entre sesiones en el mismo dispositivo.
Exportar como variables CSS
Convierte tus favoritos en propiedades personalizadas de CSS con un clic, listas para colocar en un bloque :root y crear la paleta de tu proyecto.
Ventana de detalle del color
Haz doble clic en cualquier color para ver el panorama completo: nombre de clase, HEX, RGB y HSL juntos, además de accesos rápidos a todos los demás tonos de la familia.
Búsqueda inteligente
Encuentra colores al instante por nombre de familia o valor HEX. La cuadrícula filtra en tiempo real a medida que escribes, y un filtro por categoría la reduce a neutros o colores con tono.
Tus datos siguen siendo privados
La paleta viene incluida en la app y se ejecuta por completo en tu navegador. Sin peticiones al servidor, con los favoritos guardados localmente y funcionando sin conexión tras la primera carga.
Preguntas frecuentes
¿Cuántos colores y tonos tiene Tailwind?
Esta herramienta cubre 22 familias de colores, cada una con 11 tonos del 50 (el más claro) al 950 (el más oscuro): 242 colores en total. Cinco familias son neutras (Slate, Gray, Zinc, Neutral, Stone) y las otras 17 tienen tono, desde Red hasta Rose.
¿Cuál es el código HEX de bg-blue-500?
bg-blue-500 es #3b82f6. Para encontrar el HEX de cualquier otro color, busca el nombre de la familia o pasa el cursor sobre la muestra: el número de tono y el valor HEX aparecen sobre ella, y la ventana de detalle muestra HEX, RGB y HSL juntos.
¿Cómo copio el HEX o RGB de un color de Tailwind?
Pon el menú de formato en HEX o RGB y luego haz clic en cualquier muestra para copiar ese valor. También puedes hacer doble clic en una muestra para abrir la ventana de detalle y copiar el nombre de clase, HEX, RGB o HSL por separado.
¿Cómo uso una clase de color como bg-, text- o border-?
El formato de clase copia una clase de fondo como bg-blue-500, lista para colocar en tu HTML con Tailwind CSS. Para el color del texto, cambia el prefijo a text-blue-500, y para los bordes usa border-blue-500: la familia y el tono no cambian.
¿Cuál es la diferencia entre los colores neutros?
Tailwind incluye cinco familias neutras con matices sutiles: Slate es un gris frío con tendencia al azul, Gray es un neutro equilibrado, Zinc es frío pero algo más cálido que Slate, Neutral no tiene ningún matiz de color, y Stone es un gris cálido con un toque de marrón.
¿Puedo usar estos colores sin Tailwind CSS?
Sí. Copia el valor HEX, RGB o HSL y úsalo en cualquier archivo CSS, herramienta de diseño o aplicación: los colores funcionan por sí solos sin el framework de Tailwind.
¿Se guardan mis favoritos y cómo los exporto?
Los favoritos se guardan en el almacenamiento local de tu navegador, por lo que se conservan entre sesiones en el mismo dispositivo y navegador; borrar los datos del navegador los elimina. Abre el panel de favoritos y haz clic en Exportar CSS para copiar cada favorito como propiedades personalizadas de CSS que puedes pegar en una hoja de estilos.
Aún no hay comentarios. ¡Sé el primero en comentar!