Colores UI: prueba una paleta de Tailwind en una interfaz real
Elige una familia de color de Tailwind y mira cómo queda en botones, gráficos, formularios, tarjetas y badges. Ajusta los tonos principales, genera una paleta aleatoria y exporta el resultado.
Cómo usar el preview de colores
- 1
Elige una familia
Pulsa cualquiera de los puntos de color de la barra superior. La dirección de la página guarda la familia elegida, así que puedes compartir el enlace.
- 2
Ajusta los tonos
Cambia el 600 (principal), el 500 (secundario) o el 200 (suave) con el selector, o genera una paleta aleatoria. Toda la interfaz se actualiza al momento.
- 3
Exporta la paleta
Cuando te guste, exporta la escala completa del 50 al 950 para Tailwind v4, Tailwind v3, Figma o CSS. Haz clic en cualquier tono de la escala para copiarlo.
Preguntas frecuentes
Para ver una paleta aplicada antes de llevarla a tu proyecto: cómo funcionan juntos los tonos claros y oscuros, si los botones destacan lo suficiente y si los gráficos y formularios se leen bien.
El 600 se usa para acciones y elementos destacados, el 500 para elementos secundarios y gráficos, el 100–200 para fondos y estados suaves, y el 700–800 para texto sobre fondos claros.
Sí. La dirección de la página incluye la familia elegida, por ejemplo ?family=yellow, y al abrir el enlace se carga directamente.
Puedes exportar la escala completa como variables de Tailwind v4, configuración de Tailwind v3, estilos de Figma, variables CSS o solo los códigos HEX, RGB, HSL y OKLCH.