Volver al centro de ayuda
Diseño y Personalización

Paleta Global de Colores

Crea y aplica paletas consistentes en toda la UI de tus chatbots y showcases

¿Qué es la Paleta Global?

La Paleta Global es un conjunto de 16 colores compartidos que puedes aplicar automáticamente a cualquier chatbot o showcase. Esto garantiza consistencia visual en toda tu marca sin tener que configurar colores manualmente en cada lugar.

Cómo funciona

1

Accede al Editor de Paleta Global

Desde cualquier página de edición de apariencia (chatbot o showcase):

  • Busca el botón "Paleta Global" o el ícono
  • Se abrirá un drawer lateral con opciones de paleta
2

Elige tu método de creación

El drawer tiene 3 acordeones (solo uno abierto a la vez):

1. Paleta Global Actual

Edita cada uno de los 16 colores manualmente. Útil para ajustes finos.

2. Paletas Predefinidas

Selecciona una de 10+ paletas curadas inspiradas en tendencias de diseño (Ocean Blue, Sunset Orange, Forest Green, etc.)

3. Generador de Paletas

Genera combinaciones aleatorias de colores armoniosas con un clic. Perfecto para inspiración.

3

Estructura de los 16 colores

La paleta se organiza en 4 filas de 4 colores cada una:

  • Fila 1 (Colores Base): 4 colores principales de tu paleta
  • Fila 2 (Tonos Claros): Versiones más claras (+50% brillo)
  • Fila 3 (Tonos Oscuros): Versiones más oscuras (-30% brillo)
  • Fila 4 (Neutrales): Blanco, gris claro, gris oscuro, negro
4

Guarda la paleta

Una vez satisfecho con los colores:

  • Haz clic en "Guardar Paleta Global"
  • La paleta se guardará en la base de datos del chatbot
  • Estará disponible para aplicar en chatbot y showcase
5

Aplica la paleta a la UI

Después de guardar, puedes aplicar automáticamente:

  • Haz clic en "Aplicar a Chatbot" para asignar colores al chatbot UI
  • Haz clic en "Aplicar a Showcase" para asignar colores al showcase
  • BOT247 mapeará inteligentemente cada color de paleta a elementos específicos
  • Los cambios se reflejan instantáneamente en el preview

Cómo se mapean los colores

Chatbot UI

Color Base 1
Color primario (botones, accents)
Color Base 2
Color de burbujas del usuario
Color Base 3
Fondo del sidebar
Tono Claro 1
Hover states
Tono Oscuro 1
Botones de acción secundarios
Neutrales
Fondos, textos, bordes

Showcase UI

Color Base 1
Botón primario (CTA principal)
Color Base 2
Botón secundario
Color Base 3
Botón de chat
Tono Claro 1
Fondos de hover
Neutrales
Textos, fondos de cards, bordes

Mejores prácticas

  • Contraste: Asegúrate de que haya suficiente contraste entre colores principales y neutrales
  • Prueba ambos modos: Verifica cómo se ve tu paleta en light y dark mode
  • Usa paletas predefinidas: Son profesionales y ya están balanceadas
  • Menos es más: No necesitas usar los 16 colores; 4-6 son suficientes
  • Consistencia de marca: Usa los colores de tu marca como base

Casos de uso avanzados

Paletas por marca

Si manejas múltiples marcas, crea una paleta global para cada chatbot con los colores corporativos respectivos.

Temas estacionales

Cambia la paleta global en fechas especiales (Navidad, Halloween, Black Friday) y aplícala a todos tus chatbots/showcases en segundos.

A/B Testing de colores

Experimenta con diferentes paletas para ver cuál genera más conversiones en tu showcase.