Gráficos / Color

Generador de paletas de colores: esquemas armoniosos con un clic

Genera paletas de colores basadas en la teoría del color: análogas, complementarias, triádicas, complementarias divididas, monocromáticas o aleatorias, de tres a ocho colores. Fija los colores que te gustan y regenera el resto, comprueba el contraste de cada color con el blanco y exporta la paleta como variables CSS, configuración de Tailwind, JSON, códigos hexadecimales o PNG.

Generador de paletas de colores: esquemas armoniosos con un clic: Cada paleta comienza con un tono base, tomado de un color fijado si lo hay, y coloca los demás tonos según la regla elegida: pasos de 30° para la armonía análoga, el tono opuesto para la complementaria, pasos de 120° para la triádica, 150° a cada lado para la complementaria dividida o un tono del oscuro al claro para la monocromática. La luminosidad y la saturación varían para que el conjunto incluya colores claros, medios y oscuros, y cada color muestra su relación de contraste WCAG con el blanco. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Herramienta de paletas de coloresProcesamiento local

Funciona por completo en tu navegador

ArmoníaColores

También puedes pulsar la barra espaciadora. Bloquea los colores que quieras conservar.

#64A6F52.5:1 sobre blanco

#382B9D10.5:1 sobre blanco

#772BB77.5:1 sobre blanco

#BE4BBA4.3:1 sobre blanco

#E0367B4.2:1 sobre blanco

Exportar como

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Uso de una paleta

Una distribución habitual es usar aproximadamente un 60% de un color neutro, un 30% de un segundo color y un 10% de un color de acento, de modo que el color más intenso se use con moderación en botones y elementos destacados.

Contraste

4,5:1 es el mínimo de WCAG AA para texto normal y 3:1 para texto grande; 7:1 cumple el nivel AAA.

Cómo se usa

Elige una armonía y el número de colores.
Pulsa Generar o la barra espaciadora hasta que te guste el resultado; fija los colores que quieras conservar.
Copia la paleta como código o descárgala como PNG.

Privacidad y límites

Todo se genera en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Cómo puedo conservar un color que me guste?

Haz clic en el icono de fijar. Los colores fijados se mantienen, y el primero también establece el tono base sobre el que se construyen los demás.

¿Puedo usar el color de mi marca?

Sí: haz clic en una muestra para establecerla en cualquier color, fíjala y genera el resto a su alrededor.

¿Se puede leer el texto sobre la paleta?

Cada muestra indica su relación de contraste con el blanco. WCAG exige al menos 4.5:1 para texto normal, por lo que los colores que estén por debajo de ese valor necesitan texto oscuro.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta