Generador de paletas
Genera paletas armónicas de cinco colores, bloquea favoritos y copia HEX o variables CSS.
Procesado en tu navegador, sin subida
Pulsa espacio para mezclar; haz clic en un color para copiar; bloquea para conservar; la etiqueta muestra contraste WCAG
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.
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
Fuentes, revisión y límites
Última verificación
2026-06-17
Autoría
Equipo editorial de Shape Cat
Revisión
Revisión de recursos de marca
Fuentes principales
- APIs de Canvas y exportación SVG del navegador
- Heurísticas de color y tipografía mantenidas en las herramientas del sitio
- Nombres de marca, colores y prompts introducidos por el usuario
Los kits de marca son un punto de partida creativo, no asesoría sobre marcas registradas, accesibilidad o estrategia de marca. Comprueba el contraste, las licencias y la validación legal antes de lanzar.