Elegir colores a ojo casi nunca sale bien a la primera. Con este generador de paletas de colores eliges un color base y la herramienta arma al instante una paleta de cinco tonos que combinan entre sí, con su código HEX listo para copiar. Sirve igual para la carta de una cafetería en Valencia que para el logo de una tienda online en Bogotá o las diapositivas de clase en Ciudad de México. Para crear paletas de colores online sin abrir un programa de diseño, prueba varias armonías con el mismo color y quédate con la que mejor cuente lo que quieres.
Qué hace un generador de paletas de colores
Una paleta de colores es un conjunto de colores coordinados que funcionan bien juntos: la base de una identidad de marca, de un sistema de diseño o de un proyecto visual concreto (una web, un cartel, una presentación). El Generador de Paleta de Colores toma un solo color base y construye una paleta a su alrededor con reglas clásicas de teoría del color: complementaria, análoga, triádica, complementaria dividida y monocromática.
Elige tu color base, elige la armonía y la paleta aparece al instante con los códigos HEX listos para copiar.
Cómo se usa
- Haz clic en el cuadro de color (Seed Color) y elige tu color base en el selector.
- Elige una armonía en el menú Harmony Mode (Complementary, Analogous, Triadic, Split-Complementary o Monochromatic).
- La paleta aparece con 5 colores coordinados, cada uno con su código HEX.
- Haz clic en cualquier color para copiar su HEX.
- Prueba distintas armonías con el mismo color base para ver qué paleta encaja con tu proyecto.
#1B6B45 con la armonía complementaria (Complementary):• Base:
#1B6B45 (verde)• Complementario:
#6A1B40 (su opuesto en la rueda de color, un granate profundo)• La herramienta añade además una versión más clara de cada uno (
#2FBC7A y #BC2F71) y una más oscura del verde (#0A291B).• Juntos dan el máximo contraste visual: útil para botones de acción sobre un fondo de marca.
Las cinco armonías
| Armonía | Cómo funciona | Ideal para |
|---|---|---|
| Complementaria (Complementary) | Dos colores directamente opuestos en la rueda de color, más una versión clara de cada uno y una oscura del base | Contraste alto: botones de acción, avisos, banners principales |
| Análoga (Analogous) | Cinco colores vecinos en la rueda (de −30° a +30° respecto al base) | Sensación tranquila y armoniosa: fondos, degradados |
| Triádica (Triadic) | Tres colores repartidos de forma equidistante (a 120°), más una versión clara y una oscura del base | Paletas equilibradas y vivas: ilustraciones, infografías |
| Complementaria dividida (Split-Complementary) | El color base más los dos colores a ambos lados de su complementario (a 150° y 210°) | Contraste fuerte con menos tensión que la complementaria pura |
| Monocromática (Monochromatic) | Distintas luminosidades de un mismo tono, de más oscuro a más claro | Diseños minimalistas, tratamiento de fotos, marcas de un solo color |
Para qué sirve de verdad la teoría del color
La teoría del color no es magia: es reconocimiento de patrones basado en cómo el ojo humano percibe la luz. Dos colores en extremos opuestos del espectro (complementarios) estimulan al máximo receptores distintos del ojo, y eso lo leemos como "mucho contraste". Los colores cercanos en la rueda (análogos) tienen rangos de longitud de onda que se solapan, y eso lo leemos como "armonía".
Las reglas de armonía son puntos de partida fiables, no mandamientos. Las mejores paletas de marca rompen las reglas a propósito cuando hace falta, pero empezar con una paleta basada en reglas te da una base sólida sobre la que iterar.
Qué hacer con tu paleta
Define design tokens. Convierte la paleta en variables en tu código: --color-brand-primary, --color-brand-secondary, --color-brand-accent. Usa esas variables en todas partes en lugar de códigos hex sueltos: cuando quieras cambiar de imagen más adelante, tocas un solo archivo.
Comprueba el contraste para la accesibilidad. Cada combinación de texto sobre fondo necesita una relación de contraste de al menos 4,5:1 (WCAG AA) o 7:1 (AAA) para que la lean bien las personas con baja visión. Pasa cada par de colores por un comprobador de contraste antes de darlo por bueno.
Aplícala a la interfaz. Usa un color como dominante (60 % del diseño), otro como secundario (30 %) y otro como acento (10 %). Esta regla 60-30-10 mantiene el diseño equilibrado.
Crea ilustraciones y gráficos. Las paletas generadas funcionan muy bien en ilustraciones, gráficos e infografías: en cualquier sitio donde necesites varios colores coordinados que no choquen.
Errores comunes
Saturar demasiado. Un par complementario a saturación máxima (rojo intenso + verde intenso) cansa la vista. Baja la saturación de los dos colores y el resultado será mucho más usable.
Usar todos los colores por igual. Una paleta equilibrada no significa repartir a partes iguales. Elige un color dominante, uno de apoyo y uno o dos de acento. Repartirlos a partes iguales se ve caótico.
Olvidarte del contexto. Una paleta que se ve genial en pantalla puede no imprimirse igual (la gama CMYK es distinta de la RGB) o verse diferente en pantallas con otra calibración. Pruébala en el medio real donde se va a usar.
Herramientas relacionadas
Para pasar cualquier color HEX a otros formatos (RGB, HSL, HSV), usa el Conversor de Colores. Para encontrar el color con nombre más cercano a un HEX, mira el Buscador de Nombre de Color. Y para crear degradados CSS entre dos colores, el Generador de Degradados es la herramienta indicada.