Generador de armonías de color

Cómo funciona el Generador de Armonías de Color

Qué hace la herramienta

El Generador de Armonías de Color calcula conjuntos de colores relacionados matemáticamente a partir de un único tono base: complementaria, análoga, triádica, tetrádica, cuadrada, complementaria dividida, monocromática y sombras. Cada paleta se muestra con valores HEX, RGB y HSL que puedes copiar con un clic y usar directamente en CSS o en design tokens.

Casos de uso comunes para desarrolladores

Los diseñadores prototipan paletas de marca explorando cómo evoluciona un tono de marca bajo distintas reglas de armonía. Los desarrolladores frontend generan colores de acento para botones, alertas e insignias a partir de un color principal de marca. Los ingenieros de visualización de datos eligen conjuntos de colores categóricos que se ven intencionales pero siguen siendo distinguibles. Los product managers comparan opciones de paleta al revisar propuestas de diseño sin necesitar herramientas de diseño dedicadas.

Formatos de datos, tipos o variantes

Hay ocho esquemas disponibles: Complementaria (base + 180°), Análoga (base ± 30°), Triádica (3 colores separados 120°), Tetrádica (rectangular de 4 colores), Cuadrada (4 colores separados 90°), Complementaria dividida (base + ±150°), Monocromática (mismo tono con luminosidad variable 10–90%) y Sombras (mismo tono, de oscuro a claro). Cada color incluye sus representaciones HEX, RGB y HSL junto con una etiqueta de rol.

Errores comunes y casos límite

Las armonías derivadas de colores base extremadamente desaturados o casi en escala de grises se ven indistinguibles entre esquemas — empieza con una base saturada. Las bases muy saturadas combinadas con esquemas triádicos o tetrádicos pueden producir paletas estridentes y difíciles de equilibrar; considera reducir la saturación para uso en UI. Algunas combinaciones derivadas de armonías no cumplen el contraste WCAG — verifica siempre los pares texto/fondo en la herramienta de Contraste de Color antes de publicar.

Cuándo usar esta herramienta vs código

Usa la herramienta del navegador para ideación, exploración rápida y revisión de diseño. En código, bibliotecas como chroma.js, colord o culori te permiten calcular armonías de forma programática, integrarlas en canalizaciones de build de design tokens y combinar la matemática de armonías con espacios de color perceptualmente uniformes como Oklch para obtener paletas con un aspecto más uniforme.