Generador de paletas de color

Dale un color base y gira el tono en el círculo cromático para construir seis paletas. Toca una muestra para copiar su HEX o copia el conjunto como variables CSS.

Cómo usarlo

  1. Fija el color base con HEX, rgb(), hsl() o el selector.
  2. Revisa las seis paletas: complementaria, análoga, triádica y las demás.
  3. Toca una muestra para copiar el HEX, o copia el conjunto como variables CSS.

Las paletas giran solo el tono en HSL y conservan la saturación y luminosidad de tu color, así que un color pastel da paletas pastel y uno saturado, paletas saturadas.

El número de cada muestra es la relación de contraste WCAG con el texto mostrado. El texto normal necesita 4,5:1 y los títulos grandes 3:1.

Preguntas frecuentes

¿Cómo se elige el color complementario?

Está a 180° en el círculo cromático. Es el contraste más fuerte, ideal para acentos pero cansado en superficies grandes: alrededor del 10-20% del área funciona bien.

¿Qué paleta debo usar?

Análoga o monocromática son seguras en fondos y tarjetas. La complementaria o la complementaria dividida encajan en lo que debe destacar: botones, insignias, avisos.

¿Qué copia el botón de CSS?

Una lista de propiedades personalizadas con el nombre del conjunto, como `--triadic-1: #3366CC;`, lista para pegar en `:root`.

¿Se envía mi color a algún sitio?

No. Cada conversión y cada paleta se calculan en el navegador.

Herramientas relacionadas