Generador de Paletas de Color
Elige un color base, selecciona el modo de harmonía, ajusta con los sliders y exporta donde necesites. Pulsa Espacio para mezclar los colores no fijados.
Fija colores individuales antes de generar.
¿Qué es la harmonía de color?
La harmonía de color son combinaciones visualmente agradables basadas en la posición de los colores en el círculo cromático. Una paleta harmoniosa crea sensación de equilibrio y cohesión, esencial en cualquier diseño: web, app, identidad de marca o ilustración.
Modos de harmonía disponibles
- Análogo: Colores adyacentes en el círculo. Paletas suaves y naturales, ideales para diseños calmados.
- Complementario: Dos colores opuestos (ej. azul y naranja). Alto contraste, perfecto para CTAs y destacados.
- Split-Complementario: Color base más los dos adyacentes a su complementario. Contraste alto con más flexibilidad.
- Triádico: Tres colores separados 120°. Vibrante y equilibrado, popular en diseño de marca.
- Tetrádico: Cuatro colores en rectángulo en el círculo. Paletas ricas y complejas.
- Monocromático: Variaciones de un solo tono con diferente luminosidad y saturación. Elegante y fácil de combinar.
¿Cómo se usa este generador?
1. Elige un color base con el selector o escribe un código HEX. 2. Selecciona un modo de harmonía. 3. Ajusta el número de colores, saturación, luminosidad y dispersión de tono. 4. Pulsa Generar o la barra Espacio. 5. Fija los colores que te gusten y mezcla el resto. 6. Exporta en el formato que necesites.
Formatos de exportación
Variables CSS
El botón CSS Vars copia un bloque :root listo para pegar en tu hoja de estilos:
:root {
--color-1: #7C6AFF;
--color-2: #FF6A9B;
--color-3: #6AFFD4;
}Tailwind CSS
El botón Tailwind copia un fragmento extend.colors para tu tailwind.config.js, de modo que puedas usar las clases text-color1 o bg-color2 directamente.
Imagen PNG
Descarga la paleta como imagen PNG con los códigos HEX etiquetados bajo cada muestra — ideal para documentación de diseño, mood boards o para compartir con clientes.
Preguntas frecuentes
¿Cuántos colores debe tener una paleta?
La mayoría de los sistemas de diseño usan entre 4 y 6 colores: un primario, un secundario, uno o dos neutros y un acento. Para web y apps, comenzar con 5 y asignar roles (primario, secundario, fondo, texto, acento) es lo más recomendable.
¿Esta herramienta guarda mis paletas?
No. Todo se procesa localmente en tu navegador. No se envía ningún dato a ningún servidor. Exporta tu paleta antes de cerrar la pestaña.
¿Puedo usar los colores generados en mis proyectos comerciales?
Sí. Los colores generados son tuyos y puedes usarlos en cualquier proyecto, comercial o personal, sin ninguna restricción.