Generador de paletas: crea combinaciones armónicas online
Un buen color no vive solo; funciona por la relación que tiene con los demás. El generador de paletas de Shape Cat combina reglas de armonía del círculo cromático con contraste útil para interfaz. Pulsa espacio para probar otra combinación, bloquea los colores que te gusten y copia HEX o variables CSS. Todo ocurre en local, dentro del navegador.
Generador de paletas es una herramienta gratuita de Shape Cat que funciona en tu navegador: la abres, trabajas y descargas el resultado. No subes archivos, no necesitas cuenta y no hay registro.
Pulsa espacio para mezclar; haz clic en un color para copiar; bloquea para conservar; la etiqueta muestra contraste WCAG
Cómo elegir una paleta que sirva para una interfaz real
La prueba no es si los cinco colores se ven bonitos alineados. La prueba es si pueden cumplir roles distintos: fondo, superficie, texto, borde, acción y acento. Una paleta madura suele reservar el color más vivo para la acción principal y dejar los fondos con menos saturación para que el contenido respire.
Las armonías ayudan a no empezar desde ruido. Los colores análogos dan calma y unidad; los complementarios crean contraste fuerte; las tríadas dan energía sin perder equilibrio. Después viene la parte práctica: comprobar contraste, separar colores de fondo y de texto, y evitar que todos compitan por atención.
Cuando una combinación funcione, cópiala como variables CSS y pruébala en componentes reales. Si un texto no alcanza contraste suficiente, baja saturación o cambia la luminosidad. Si todo se ve plano, reserva un acento más intenso para botones, enlaces o números clave.
Cómo usar Generador de paletas
- 1Elige una regla de armonía: análogos, monocromática, complementaria, triádica, complementaria dividida o tetrádica.
- 2Pulsa espacio o el botón de mezclar hasta que la paleta tenga el tono que buscas.
- 3Bloquea los colores que quieras conservar y vuelve a mezclar el resto.
- 4Copia todos los HEX o exporta variables CSS listas para pegar en tu proyecto.
Por qué usar Generador de paletas en Shape Cat
- No genera colores al azar: parte de relaciones cromáticas reconocibles.
- Incluye una señal de contraste para saber si el texto será legible sobre cada color.
- Sirve tanto para explorar una dirección visual como para entregar tokens a desarrollo.
- No sube nada ni requiere cuenta; es una herramienta ligera para decidir rápido.
Preguntas frecuentes
¿Cómo se generan las paletas?
Shape Cat toma un tono base y aplica relaciones del círculo cromático, como análogos, complementarios o tríadas, después ajusta luminosidad y saturación para crear cinco colores usables.
¿Cómo conservo un color y cambio los demás?
Bloquea ese color con el icono de candado. Al volver a mezclar, los colores bloqueados se mantienen y solo cambia el resto.
¿Puedo llevar la paleta a código?
Sí. Puedes copiar una lista de HEX o un bloque :root con variables CSS listo para pegar.
Actualizado , equipo de Shape Cat
Sources, review and limits
Last verified
2026-06-17
Author
Shape Cat editorial desk
Reviewer
Brand asset review
Primary sources
- Browser Canvas and SVG export APIs
- Color and typography heuristics maintained in the site tools
- User-entered brand names, colors and prompts
Brand kits are creative starting points, not trademark, accessibility or brand-strategy advice. Test contrast, licensing and legal clearance before launch.