Generador de Paletas de Colores

Generador de paletas de colores gratis: crea paletas armoniosas (análogas, complementarias, triádicas…), bloquea los colores que quieras y exporta en HEX o CSS.

Presiona la barra espaciadora o Generar para obtener colores nuevos. Bloquea los que quieras conservar y haz clic en un código para copiarlo.
Copiar como

También: Paleta de colores de una imagen y cuentagotas · Comprobador de contraste de color

Qué hace


Este generador crea paletas de colores para sitios web, apps, presentaciones y diseños. Elige una armonía para armar, a partir de un color base, colores que combinan entre sí, o presiona la barra espaciadora para obtener paletas aleatorias, y bloquea los colores que te gusten para que solo cambien los demás. Los colores se calculan en el espacio de color OKLCH, que mantiene la luminosidad percibida aunque cambie el tono, por eso las paletas se ven equilibradas. Copia los colores como HEX, variables CSS o JSON, o comparte la paleta con un enlace.

Cómo usarla


  1. Elige una armonía y un color base, o deja Aleatoria.
  2. Presiona la barra espaciadora o Generar hasta que te guste la paleta; bloquea los colores que quieras conservar.
  3. Haz clic en un código de color para copiarlo, o copia toda la paleta como HEX, CSS o JSON.

Preguntas frecuentes


¿Qué significan las armonías?
Son combinaciones clásicas del círculo cromático. La análoga usa tonos vecinos para un aspecto sereno; la complementaria usa tonos opuestos para un contraste fuerte; la triádica y la tetrádica reparten tres o cuatro tonos de forma uniforme; la complementaria dividida suaviza el par complementario; la monocromática usa un solo tono en varios matices.

¿Por qué OKLCH y no HSL?
En HSL, un amarillo y un azul con el mismo valor de luminosidad se ven muy distintos en brillo. OKLCH está diseñado en torno a la percepción humana, así que al girar el tono los colores conservan la misma claridad. Por eso es el espacio de color que se agregó a CSS.

¿Puedo comprobar si los colores son legibles?
Sí: usa el comprobador de contraste para ver si un texto de un color sobre un fondo de otro cumple los niveles de accesibilidad de las WCAG.

Wikipedia — Color scheme
Wikipedia — Oklab color space