Visualizador de paletas de colores
Mira una paleta o un color de marca en un sitio web completo, con fuentes reales, verificación de contraste en vivo y modos claro y oscuro.
Cómo previsualizar colores en una interfaz real
- Empieza desde una paleta, por ejemplo abriéndola desde el generador, o cambia a Desde un color de marca y elige un solo color.
- Elige una plantilla de vista previa: landing page, panel, app móvil o artículo, y alterna entre el modo claro y el oscuro.
- Haz clic en un rol, como fondo o primario, para darle otro color de la paleta, o presiona Mezclar roles para probar otra asignación. Elige una combinación de fuentes o mézclalas.
- Revisa la lista de contraste en vivo y aplica Corregir a cualquier par que no cumpla; luego copia los roles como variables CSS, Tailwind v4 o tokens de shadcn/ui, o copia el enlace para compartir la vista previa.
Qué puedes hacer
Cuatro plantillas de vista previa
Mira tus colores en una landing page, un panel, una pantalla de app móvil y un diseño de artículo.
Asignación de roles
Decide qué color de la paleta es el fondo, el texto, la acción principal y los demás roles de la interfaz, y deshaz cualquier cambio.
Fuentes reales
Combina fuentes para títulos y texto de una lista incluida y míralas en la vista previa, con una escala tipográfica.
Contraste en vivo
Los pares clave de texto y fondo se verifican mientras editas, con una corrección de un clic para los que no cumplen.
Modos claro y oscuro
Cambia toda la vista previa entre claro y oscuro para ver ambas versiones de tus colores.
Exporta y comparte
Copia los roles como variables CSS, Tailwind v4 o tokens de shadcn/ui, o copia un enlace que abre la misma vista previa.
Preguntas frecuentes
¿Cómo previsualizo una paleta de colores en un sitio web?
Abre el visualizador con tu paleta, elige una plantilla como una landing page o un panel, y mira los colores aplicados a un diseño completo. Alterna entre el modo claro y el oscuro y cambia qué color cumple cada rol.
¿Por qué previsualizar una paleta en un diseño real?
Las muestras esconden problemas. En una página ves cómo se comporta un color como botón, enlace, texto principal o fondo de tarjeta, y si el texto sobre él sigue siendo legible.
¿Puedo usar mi propio color de marca en lugar de una paleta?
Sí. Elige Desde un color de marca, escribe un código hex y el visualizador deriva los roles de la interfaz a partir de ese único color.
¿El visualizador verifica la accesibilidad?
Sí. Lista el contraste de los pares clave de texto y fondo, marca los que no cumplen y ofrece Corregir, que ajusta el color de ese par.
¿Cómo exporto los colores?
Usa la sección Compartir y exportar para copiar los roles como variables CSS, un tema de Tailwind v4 o tokens de shadcn/ui, o copia el enlace a la vista previa.