Volver al centro de ayuda
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. Garantiza consistencia visual en toda tu marca sin tener que configurar colores manualmente en cada lugar.
Video tutorial
Cómo funciona
1
Abre Ajustes › Colores
En cualquier editor visual (Chat Directo, Showcase o Página web):
- Da clic en Ajustes en la barra superior y abre la pestaña Colores
- O, desde cualquier selector de color, usa "Editar paleta global" para llegar directo
2
Elige tu método de creación
En la pestaña Colores tienes dos secciones:
1. Paleta de colores global
Edita cada uno de los 16 colores, en modo claro y en modo oscuro. Útil para ajustes finos.
2. Estilos predefinidos
Elige una paleta lista o extrae los colores dominantes de una foto o de tu logo.
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
Los cambios se ven al instante en el editor:
- Da clic en Guardar (barra superior o pie del panel)
- La paleta es una sola para tu chatbot: la usan Chat Directo, Showcase y tu página web
- Los elementos a los que les asignaste un color de la paleta se actualizan solos cuando la cambias
5
Aplica la paleta a todo el chat
En el editor de Chat Directo, Ajustes › Colores incluye:
- "Aplicar la paleta a todo el chat": BOT247 elige los colores del chat, la burbuja y el avatar a partir de tu paleta
- Revisa que los textos tengan buen contraste en modo claro y oscuro
- Si no te gusta el resultado, deshazlo con Ctrl+Z antes de guardar
Cómo se mapean los colores
Chat Directo
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
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