Cuatro armonías de color a partir de un color base
Elige un solo color y el generador de paletas calcula las cuatro armonías clásicas del círculo cromático: complementaria, análoga, triádica y complementaria dividida. Cada una se muestra como una fila de muestras que puedes copiar con un clic, y el conjunto completo se puede exportar de una vez. Los cálculos se ejecutan en tu navegador, así que el resultado se actualiza al instante al cambiar el color base, y el color se escribe en la URL para que puedas compartir o guardar cualquier paleta.
Cómo usarlo
- Elige un color base con el selector o escribe un código hex como
#FF5722. Los valores RGB y HSL aparecen debajo. - Recorre las cuatro paletas. Haz clic en cualquier muestra para copiar su código hex.
- Pulsa Exportar todo para copiar todas las armonías como propiedades personalizadas CSS, configuración de Tailwind, variables SCSS y JSON en un solo paquete.
- Pulsa Compartir para copiar un enlace que abre el generador con el mismo color base.
¿Qué armonía deberías usar?
- Complementaria (dos colores a 180°) ofrece el contraste más fuerte. Úsala para un botón primario sobre un fondo de marca.
- Análoga (vecinos en el círculo) se siente tranquila y coherente. Encaja en dashboards, apps de lectura y la mayor parte de la interfaz.
- Triádica (tres colores a 120°) es viva y equilibrada. Buena para ilustraciones, gráficos y productos infantiles.
- Complementaria dividida conserva la fuerza de la complementaria pero es más fácil de equilibrar; una opción segura para páginas de marketing.
Consejos
- Parte de un color que ya tengas, por ejemplo el color principal de tu logo, o uno extraído de una foto con el extractor de colores de imagen.
- Las armonías te dan relaciones de tono, no matices. Crea versiones más claras y más oscuras de cada color para fondos y texto.
- Pasa los colores de texto por el verificador de contraste; un par complementario puede ser vívido y aun así no cumplir WCAG como texto.
- Para una paleta basada en una atmósfera o una historia en lugar de un color, usa el generador de paletas con IA.