Generador de Paletas de Colores
Armá paletas complementarias, análogas, triádicas y monocromáticas a partir de un color base. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
¿Qué es una armonía de colores?
Una armonía de colores es un conjunto de colores elegidos por su posición en el círculo cromático, una forma clásica de obtener combinaciones que se ven equilibradas juntas. Los colores complementarios están opuestos, los análogos son vecinos, los triádicos están repartidos parejo a un tercio del círculo, y los esquemas complementario dividido, tetrádico y cuadrado son variaciones de esos. Un esquema monocromático mantiene el mismo tono y cambia solo la luminosidad. Este generador rota el tono de tu color base para armar cada armonía y te deja copiar la paleta en HEX, RGB o HSL.
Ejemplos
Usar una paleta en código, y rotar un tono para armar una vos mismo:
:root {
--color-primary: #2563eb;
--color-accent: #ebad25; /* complementary */
}$primary: #2563eb;
$complement: adjust-hue($primary, 180deg);
$triad: adjust-hue($primary, 120deg);// rotate the hue of an hsl() color
const rotate = ({ h, s, l }, deg) => ({ h: (h + deg + 360) % 360, s, l });
rotate({ h: 221, s: 83, l: 53 }, 180); // { h: 41, ... }import colorsys
h, l, s = colorsys.rgb_to_hls(37 / 255, 99 / 255, 235 / 255)
complement = colorsys.hls_to_rgb((h + 0.5) % 1, l, s)Casos de uso
Elegir un color de acento
Partí de tu color de marca principal y usá su complementario o complementario dividido para los calls to action y los destacados.
Gráficos con varias series
Las paletas triádicas, tetrádicas y cuadradas dan colores bien distintos para las series de un gráfico que igual se sienten parte del mismo conjunto.
Interfaces tranquilas y coherentes
Las paletas análogas y monocromáticas mantienen un diseño calmo y unificado, ideal para dashboards y páginas con mucha lectura.
Explorar un punto de partida
Probá todas las armonías con el mismo color base para comparar estilos rápido antes de definir una paleta en tu herramienta de diseño.