Genera combinaciones cromáticas armoniosas a partir de un color principal con exportación en HEX y RGB.
Genera combinaciones cromáticas armoniosas a partir de un color principal con exportación en HEX y RGB. Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
Este generador de paletas trabaja en el modelo HSL: H (tono) es un ángulo de 0 a 360° en el círculo cromático, y S (saturación) y L (luminosidad) son porcentajes. Eliges un color semilla y la herramienta gira por el círculo según las reglas clásicas de la teoría del color para crear cinco colores a la vez. Como solo cambia el tono, o solo la luminosidad y la saturación, los colores guardan una relación matemática clara y combinan de forma natural, no al azar.
Cada modo tiene su uso. Monocromático mantiene un tono y varía luminosidad y saturación: es la opción más segura para marcas e interfaces con mucha información. Complementario toma el color opuesto a 180°, con el mayor contraste para botones y destacados. Análogo usa vecinos a ±15° y ±30°, suave y natural como muchas ilustraciones y paisajes. Triádico divide el círculo en tercios (120° y 240°) para una paleta rica que exige cuidar las proporciones. Aleatorio elige dentro de rangos razonables cuando solo buscas inspiración.
Al aplicarla, prueba la regla 60-30-10: 60 % de color dominante en fondos y superficies grandes, 30 % de color secundario en secciones y tarjetas, y 10 % de acento en botones y enlaces. Las paletas complementarias y triádicas se ven recargadas si usas todos los colores por igual, así que elige un protagonista y desatura el resto. Y no olvides la legibilidad: el texto debe alcanzar al menos el contraste WCAG AA de 4,5:1, que puedes comprobar con nuestro analizador de contraste.
Haz clic en una muestra para copiar su código HEX o exporta la paleta completa como variables CSS, variables SCSS, configuración de Tailwind o JSON para pegarla en tu proyecto. El generador de degradados CSS de abajo convierte la paleta en un fondo degradado. Todo se calcula en tu navegador.
Los complementarios están a 180° y dan el máximo contraste; los análogos están a unos 15–30° y resultan suaves; los triádicos están a 120° y son vivos pero más difíciles de equilibrar.
Usar aproximadamente un 60 % de color dominante, un 30 % de secundario y un 10 % de acento. Evita el caos visual y reserva el acento para botones y detalles clave.
Sí. Puedes exportar variables CSS, variables SCSS, configuración de Tailwind y JSON, listos para pegar.
La monocromática solo cambia luminosidad y saturación, así que los colores nunca chocan y la jerarquía se crea con claros y oscuros. Es muy fiable para UI y marcas.
Ver esta categoría: Diseño y color
Optimiza y comprime código SVG localmente eliminando metadatos y etiquetas redundantes con vista previa.
Crea y previsualiza gradientes lineales y radiales, explora combinaciones prediseñadas y copia el código CSS.
Convierte valores de color entre HEX, RGB, HSL y CMYK, y calcula el ratio de contraste de accesibilidad WCAG 2.1.
Crea cajas con sombras multidimensionales y efectos de vidrio esmerilado con copia rápida de reglas CSS.
