Generador de Paletas de Colores

Elegir colores que combinen es más fácil con un poco de teoría del color. Este generador crea paletas armónicas a partir de un color base con los esquemas clásicos: complementario, análogo, triádico, complementario dividido, tetrádico y monocromático. También puede crear paletas aleatorias equilibradas. Puedes bloquear los colores que te gusten mientras generas el resto y copiar la paleta en HEX o como variables CSS listas para tu proyecto.

Cómo usar

1. 1

   Elige un color base con el selector o escribe su código HEX

2. 2

   Selecciona una armonía de color o pulsa «Paleta aleatoria»

3. 3

   Bloquea con el candado los colores que quieras conservar y regenera los demás

4. 4

   Haz clic en un color para copiar su HEX, o copia toda la paleta como variables CSS

Beneficios

• Seis armonías basadas en el círculo cromático
• Paletas aleatorias con luminosidad escalonada
• Bloqueo de colores entre generaciones
• Texto con contraste automático sobre cada color
• Exporta variables CSS o lista de códigos HEX
• Ideal para diseño web, marcas y presentaciones

Armonías de color

Las armonías se construyen girando el tono (hue) en el círculo cromático. La complementaria une colores opuestos, a 180°, con mucho contraste, ideal para destacar un botón. La análoga usa colores vecinos, a 30° de distancia, y transmite calma y unidad. La triádica reparte tres colores a 120°, vibrante pero equilibrada. La complementaria dividida sustituye el opuesto por sus dos vecinos, con menos tensión que la complementaria pura. La tetrádica combina dos pares de complementarios y la monocromática usa un solo tono con distintas luminosidades.

La regla 60-30-10

Una paleta no se aplica en partes iguales. Una guía clásica del diseño de interiores que funciona también en la web es la regla 60-30-10: un color dominante en el 60% de la superficie (fondos), un color secundario en el 30% (tarjetas, secciones) y un color de acento en el 10% (botones, enlaces, avisos). Los colores de acento suelen ser los más saturados de la paleta, y los dominantes, los más claros o neutros.

Contraste y accesibilidad

Un texto debe contrastar lo suficiente con su fondo para que todos puedan leerlo. Las pautas WCAG piden una relación de contraste mínima de 4.5:1 para texto normal y de 3:1 para texto grande. En cada muestra, el generador elige automáticamente texto blanco o negro según la luminancia del color. Para medir el contraste exacto y ver si cumple AA o AAA, usa nuestro selector de color.

Usar la paleta en tu proyecto

El botón «Copiar CSS» genera un bloque :root con variables --color-1, --color-2, etcétera, que puedes pegar en tu hoja de estilos y renombrar según su función, como --primario o --fondo. Si trabajas en Figma, Canva o PowerPoint, copia la lista de códigos HEX y pégalos en la paleta de tu documento. Guarda la paleta que elijas en un documento de marca para usarla siempre igual.