🎨 Generador de Paleta de Colores — 5 Colores Armoniosos

Generate harmonious 5-color schemes from any base color. Complementary, analogous, triadic, tetradic, monochromatic. Export as CSS variables or Tailwind.

Enter a base color and instantly see five harmonious colors generated using classic color theory rules: complementary (opposite), analogous (adjacent), triadic (three equidistant), tetradic (four), or monochromatic. Export as CSS custom properties, a Tailwind config, or JSON.

Base Color

Scheme

Export as:

How to Use

Pick a base color

Click the base color swatch or enter a HEX value to set your starting color.

Choose a scheme

Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.

Export the palette

Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.

Frequently Asked Questions

What is a color palette in design? +

A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).

What is a complementary color scheme? +

Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.

What is an analogous color scheme? +

Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.

How do I lock a color I like? +

Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.

How do I export the palette? +

Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.

Guía: Generador de Paletas de Color

¿Qué es?

Genera conjuntos de colores armoniosos según teoría del color: complementarios, análogos, triádicos o monocromáticos. Una paleta bien elegida establece identidad visual y guía la atención del usuario.

Cómo usar

Elige un color base con el selector o valor HEX.
Selecciona el esquema: complementario, análogo, triádico, monocromático.
Exporta como CSS variables o JSON.

Consejos

Limita tu paleta principal a 3-5 colores: primario, secundario, acento y neutros.
Verifica el contraste para accesibilidad (WCAG AA mínimo).
Las variables CSS como --color-primary-500 facilitan los temas claro/oscuro.