Cómo usar

1
Seleccionar armonía
Elige una regla de armonía de colores como Análogos o Complementarios para definir la relación entre colores.
2
Elegir ambiente
Configura el ambiente con el selector de mood. Elige entre Pastel, Vibrante o Modo Oscuro para tu marca.
3
Generar
Haz clic en Generar para crear paletas únicas. Bloquea los colores que te gusten y regenera el resto.
4
Exportar
Copia códigos Hex individuales o haz clic en Exportar para obtener la configuración completa de Tailwind CSS.

Guía de Teoría del Color

Entendiendo la Armonía

Análogos
Colores adyacentes en el círculo cromático. Crea diseños serenos y cómodos, ideales para temas naturales.
Complementarios
Colores opuestos en el círculo cromático. Genera alto contraste e impacto visual. Excelente para llamadas a la acción.
Triádico
Tres colores equidistantes en el círculo cromático. Ofrece alto contraste manteniendo armonía.
Complemento Dividido
Variación del esquema complementario. Usa un color base y los dos adyacentes a su complemento.
Monocromático
Variaciones de luminosidad y saturación de un solo color. Limpio, elegante y relajante.
Caos Aleatorio
Colores completamente aleatorios sin reglas. Ideal para inspiración inesperada o brainstorming.

Explorando los Ambientes

Estándar
Saturación y brillo equilibrados. Adecuado para diseño web general y componentes UI.
Sueños Pastel
Alto brillo y baja saturación. Suave y tranquilizador. Perfecto para lifestyle o temas de primavera.
Neón Vibrante
Alta saturación y brillo medio. Energético y llamativo. Ideal para tech, deportes o entretenimiento.
Modo Oscuro
Bajo brillo y tonos desaturados. Profundo, misterioso y moderno. Reduce la fatiga visual.
Retro Vintage
Tonos desaturados y ligeramente cálidos. Nostálgico, clásico y atemporal.

Choosing Colors That Work Together

Overview

Color choice can make or break a design. Random color combinations look chaotic; deliberate palettes built on color theory feel intentional and professional. This tool generates harmonious palettes from a single base color using established color theory relationships: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and tetradic (four). It also extracts palettes from uploaded images and shows hex/RGB/HSL values for direct use in CSS or design files.

How It Works

Color theory expressed mathematically: a color in HSL has hue (0–360°), saturation, and lightness. Complementary = base hue + 180°. Triadic = base + 120° and base + 240°. Analogous = base ± 30°. The tool computes these mathematically, then displays the resulting palette with copy-to-clipboard for each color. Image-based palettes use color quantization (k-means clustering) to find the most dominant colors in the uploaded image.

When to Use This

Designing UI for a website or app (primary, secondary, accent colors). Picking colors for a brand identity. Coordinating slide deck visuals. Choosing paint colors for a room (start from one wall, find complementary trim). Creating data visualization color schemes (categorical or sequential). Generating themes for graphics — Instagram posts, YouTube thumbnails, blog headers.

Frequently Asked Questions

What's the difference between complementary and analogous?

Complementary colors are opposite on the color wheel (blue + orange) — high contrast, visually striking. Analogous colors are next to each other (blue + blue-green + green) — calmer, more cohesive. Use complementary for accents, analogous for backgrounds.

How many colors should a design use?

60-30-10 rule: 60% dominant (background), 30% secondary, 10% accent. Most professional designs use 3–5 colors total. More than 5 starts to feel chaotic unless you're explicitly going for a vibrant playful look.

What's the WCAG contrast requirement?

For accessibility, text must have at least 4.5:1 contrast against its background (3:1 for large text). Black on white is 21:1. Dark gray on light gray often fails — check with a contrast tool before shipping.