Generador de Paletas de Colores Armónicas
Genera paletas equilibradas basadas en la rueda cromática con bloqueo de tonos y previsualización de UI en vivo.
Color Base #6366f1
EspacioPresiona la barra espaciadora para aleatorizar
Armonía Cromática
Base
RGB: 99, 102, 241HSL: 239°, 84%, 67%
Base Light
RGB: 201, 201, 243HSL: 239°, 64%, 87%
Complementario
RGB: 242, 239, 100HSL: 59°, 84%, 67%
Comp. Dark
RGB: 209, 206, 31HSL: 59°, 74%, 47%
Comp. Light
RGB: 253, 253, 206HSL: 59°, 94%, 90%
Vista Previa de Componentes UI
Diseño Cohesivo de Interfaz
Visualiza cómo interactúan tus colores en componentes reales antes de codificar.
Complementario
Exportar Paleta
css
:root {
--color-1: #6366f1; /* Base */
--color-2: #c9c9f3; /* Base Light */
--color-3: #f2ef64; /* Complementario */
--color-4: #d1ce1f; /* Comp. Dark */
--color-5: #fdfdce; /* Comp. Light */
}Cómo generar paletas de color armoniosas
Principios de la teoría del color aplicados a tus proyectos web.
1
Elige tu color base o genera uno aleatorio
Selecciona tu color de marca en el selector o pulsa el botón de aleatorizar.
2
Selecciona una regla de armonía cromática
Explora relaciones complementarias (alto contraste), análogas (suaves) o triádicas (vibrantes).
3
Bloquea colores favoritos y exporta
Fija los tonos que más te gusten y copia el código en CSS Variables o Tailwind.
100% Local y Privado
Cálculo cromático en memoria
Todas las transformaciones de espacio de color HSL y RGB ocurren de forma instantánea en tu navegador.
Preguntas Frecuentes sobre Paletas de Color
Es una combinación formada por colores situados en lados exactamente opuestos de la rueda de color (180°), ofreciendo el máximo contraste dinámico.
Las armonías análogas utilizan colores adyacentes en la rueda (±30°). Crean sensaciones relajadas, unificadas y de serenidad visual.
Te permite congelar tonos específicos mientras sigues aleatorizando el resto de la paleta hasta encontrar la combinación perfecta.
Copia el bloque en la pestaña "Tailwind Config" y pégalo dentro de la sección theme.extend.colors de tu archivo tailwind.config.js.