Explorador de armonías cromáticas

• Rueda de color interactiva: el explorador dibuja una rueda de color en vivo en la que puedes hacer clic para elegir cualquier tono. Los puntos de armonía se actualizan al instante mientras te mueves por la rueda, mostrando exactamente dónde cae cada color de la armonía.
• Cálculo instantáneo de armonías: los siete tipos de armonía (complementaria, complementaria partida, análoga, triádica, tetrádica, complementaria partida doble y monocromática) se actualizan en tiempo real al cambiar el color base.
• Procesamiento seguro y privado: tus datos de color nunca salen de tu dispositivo. El explorador se ejecuta íntegramente en tu navegador con renderizado basado en canvas, así que no se sube ningún dato.
• 100 % gratis para siempre: usa este explorador sin registro, suscripciones, límites de tasa ni muros de pago ocultos. Explora tantas combinaciones de color como necesites, totalmente gratis.

Un explorador de armonías cromáticas es una herramienta que visualiza las relaciones matemáticas entre colores en la rueda de color. La teoría de la armonía cromática define relaciones angulares concretas entre tonos que producen combinaciones visualmente agradables; por ejemplo, los colores separados 180° (complementarios) crean un alto contraste, mientras que los separados 30° (análogos) crean transiciones suaves y naturales. Este explorador dibuja una rueda de color interactiva, calcula los siete tipos principales de armonía a partir de tu color base y exporta los resultados como variables CSS, todo ejecutándose localmente en tu navegador.

1. Introduce o elige un color base: escribe un código de color HEX en el campo de entrada o haz clic en cualquier punto de la rueda de color para elegir un tono. Los puntos de armonía se actualizan al instante en la rueda.
2. Selecciona un tipo de armonía: haz clic en cualquiera de las siete tarjetas de armonía para ver sus colores resaltados en la rueda y mostrados como muestras individuales con valores HEX y HSL.
3. Copia o exporta la paleta: haz clic en cualquier muestra para copiar su valor HEX, usa Copiar HEX para copiar todos los colores a la vez, o usa la exportación de variables CSS para copiar un bloque de propiedades personalizadas CSS listo para usar.

• Complementaria: dos colores directamente opuestos en la rueda (a 180°). Crea el máximo contraste y tensión visual, ideal para botones de llamada a la acción y diseños de alto impacto.
• Complementaria partida: el color base más dos colores adyacentes a su complementario (±30° respecto al complementario). Menos tensión que la complementaria pero aún con alto contraste: una opción más segura para la mayoría de diseños.
• Análoga: cinco colores adyacentes en la rueda (±30° y ±60°). Armoniosa y de aspecto natural, frecuente en la naturaleza y usada para diseños serenos y cohesionados.
• Triádica: tres colores espaciados uniformemente a intervalos de 120°. Vibrante y equilibrada: aporta un fuerte contraste visual manteniendo la armonía.

El explorador de armonías cromáticas calcula las relaciones de armonía solo según el ángulo de tono, conservando la saturación y la luminosidad de tu color base en todos los colores de la armonía. En la práctica, quizá quieras ajustar la saturación y la luminosidad de cada color de la armonía según el contexto de tu diseño. La exportación de variables CSS usa nombres genéricos (--color-1, --color-2…): renómbralos para que coincidan con las convenciones de tu sistema de diseño antes de usarlos en producción.