Generador de Paletas de Color

Los esquemas de armonía

• Complementario: base + opuesto en la rueda de colores (180°). Alto contraste, vibrante. Bueno para botones de llamada a la acción contra un color de marca.
• Análogo: 3-5 matices dentro de 30° entre sí. Calmado, armonioso, generalmente de una familia cálida o fría. Bueno para fondos e ilustraciones con un tema de una familia.
• Triádico: 3 matices espaciados equitativamente (120°). Vibrante y equilibrado. Común en productos para niños y marcas audaces.
• Complemento dividido: base + dos matices flanqueando el complemento (150° y 210°). Más rico que el complementario, menos tenso.
• Tetrádico / cuadrado: 4 matices a 90°. Más difícil de equilibrar — elige uno como dominante.
• Monocromático: un solo matiz, variada saturación y claridad. Elegante y cohesivo; carece de acento a menos que se combine con un neutro.

Estructura de la paleta para trabajo real

Los sistemas de diseño típicamente necesitan:

• Primario (marca base)
• Secundario (marca de apoyo)
• Acento (CTA, destacados)
• Escala neutra (fondos, texto, bordes — 5-10 grises)
• Semántico (éxito, advertencia, error, información)
• Superficie (fondos de panel, superposiciones)

Una paleta de armonía te da primario + secundario + acento. Los neutros y semánticos generalmente provienen de convenciones separadas (grises desaturados; matices semánticos estandarizados).

Formatos de exportación

Propiedades CSS personalizadas:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Configuración de Tailwind:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Contraste y accesibilidad

Los esquemas de armonía no garantizan accesibilidad. Verifica las combinaciones de paletas contra los requisitos de contraste WCAG:

• Texto del cuerpo contra el fondo: 4.5:1 mínimo (AA).
• Texto grande: 3:1.
• No texto (botones, íconos, anillos de enfoque): 3:1.

Combina el generador con el verificador de contraste para encontrar combinaciones compatibles.

Consejos

• Comienza con un color base definido, no aleatorio — las armonías se sienten intencionadas cuando la base tiene significado (tu marca, una foto que te gusta, una referencia cultural).
• Prueba la paleta en uso real: en un botón, contra texto, en un gráfico. Verse bien en muestras no garantiza que funcione en una interfaz de usuario.
• Reduce la saturación ligeramente para paletas destinadas a superficies grandes — fondos completamente saturados son fatigantes.
• Mantén los acentos raros: si el 80% de una interfaz de usuario es primario y secundario, usa el color de acento en el 10% de los puntos de contacto (CTAs) para un máximo impacto.