Personalizar Colores y Usar Temas

Personalizar Colores y Usar Temas

La personalización de colores te permite combinar perfectamente la Pantalla de Vuelos con la identidad de tu marca. Este artículo explica cómo seleccionar colores, usar temas y crear una identidad visual consistente.

Entendiendo el Sistema de Colores

Color Primario

El color primario se usa para:

Ejemplos:

Color Secundario

El color secundario se usa para:

Recomendación: Elige una variante más clara de tu color primario para mejores resultados.

Personalizar Colores

Guía Paso a Paso

- Inicia sesión en el Portal del Hotel

- Haz clic en "Marca" en la navegación

- Desplázate a "Colores de Marca"

- Haz clic en el campo de "Color Primario"

- Elige un color en el selector de color O

- Ingresa un código hex (ej., #1E40AF)

- Haz clic en el campo de "Color Secundario"

- Elige un color O

- Ingresa un código hex

- Las cajas de vista previa muestran tus colores

- Verifica el contraste

- Prueba diferentes combinaciones

- Haz clic en "Guardar Colores"

- Los cambios se guardan inmediatamente

- La pantalla se actualizará en la próxima recarga

Usar el Selector de Color

Método 1: Selector Visual de Color

1. Haz clic en el cuadrado de color
2. Mueve el cursor en el espectro de color
3. Ajusta brillo/saturación
4. El color se aplica automáticamente

Método 2: Ingreso de Código Hex

1. Haz clic en el campo de texto
2. Ingresa un código hex de 6 dígitos
3. Formato: #RRGGBB (ej., #1E40AF)
4. Presiona Enter para aplicar

Método 3: Convertidor RGB

Si tienes valores RGB (ej., RGB 30, 64, 175):
1. Usa un convertidor RGB a Hex
2. Ejemplo: https://www.rgbtohex.net/
3. Convierte RGB a Hex
4. Ingresa el código hex

Usar Temas Predefinidos

8 Temas Predefinidos

Ofrecemos 8 temas diseñados profesionalmente:

1. Azul Océano (Predeterminado)

2. Verde Bosque

3. Púrpura Real

4. Naranja Atardecer

5. Rojo Rubí

6. Azul Medianoche

7. Esmeralda

8. Gris Pizarra

Seleccionar un Tema

- Navega a "Marca" → "Colores de Marca"

- Haz clic en un botón de tema

- Los colores se aplican automáticamente

- Ajusta los colores según sea necesario

- Guarda tus cambios

Armonía de Color y Mejores Prácticas

Verificar Contraste

Importante para Legibilidad:

Herramientas en Línea:

Psicología del Color

Azul (Azul Océano, Azul Medianoche):

Verde (Verde Bosque, Esmeralda):

Púrpura (Púrpura Real):

Naranja (Naranja Atardecer):

Rojo (Rojo Rubí):

Gris (Gris Pizarra):

Combinaciones de Color

Monocromática (Recomendada):

Color primario: Tono más oscuro (ej., #1E40AF)
Color secundario: Tono más claro (ej., #3B82F6)
Resultado: Armonioso, profesional

Complementaria (Avanzada):

Color primario: Azul (#1E40AF)
Color secundario: Naranja (#F97316)
Resultado: Alto contraste, llamativo
Advertencia: Puede ser demasiado fuerte

Análoga (Armoniosa):

Color primario: Azul (#1E40AF)
Color secundario: Verde (#166534)
Resultado: Natural, relajante

Probar Colores

Vista Previa en Vivo

- Haz clic en "Vista Previa" en el portal

- Ve tus colores en vivo en la pantalla

- Monitor de escritorio

- Tablet

- Pantalla Android de 32"

- Smartphone (vía código QR)

- Prueba con luz brillante (lobby durante el día)

- Prueba con luz tenue (lobby por la noche)

- Verifica reflejos

Pruebas A/B

Método:

Preguntas de Feedback:

Personalización Avanzada

Formato de Código Hex

Formato Válido:

Ejemplos:

✅ #1E40AF (correcto)
✅ #1e40af (correcto, minúsculas ok)
✅ #000000 (Negro)
✅ #FFFFFF (Blanco)

❌ 1E40AF (falta #)
❌ #1E40 (muy corto)
❌ #1E40AFGG (muy largo)
❌ #ZZZZZZ (caracteres inválidos)

Extraer Colores del Logo

Método 1: Adobe Color:

Método 2: Coolors.co:

Método 3: DevTools del Navegador:

Color Secundario Automático

Consejo: Nuestro Selector de Color genera automáticamente un color secundario que combina cuando cambias el color primario.

Algoritmo:

Ejemplo:

Primario: #1E40AF (Azul Oscuro)
↓ Generado automáticamente
Secundario: #3B82F6 (Azul Claro)

Solución de Problemas

Los Colores No Se Guardan

Problema: Los cambios se pierden

Solución:

Los Colores No Aparecen en la Pantalla

Problema: La pantalla muestra colores antiguos

Solución:

Error "Formato de color inválido"

Problema: El código hex no es aceptado

Solución:

Los Colores Se Ven Diferentes de lo Esperado

Problema: Los colores se ven diferentes en la pantalla

Causas Posibles:

Solución:

Accesibilidad

Cumplimiento WCAG

Requisitos Mínimos:

Herramientas de Prueba:

Daltonismo

Consejos:

Herramientas de Simulación:

Preguntas Frecuentes

¿Puedo usar más de 2 colores?

No, el sistema soporta colores primario y secundario. Estos se aplican inteligentemente en toda la pantalla.

¿Los colores se aplican igual en todas las páginas?

Sí, los colores se aplican a toda la pantalla (Salidas, Llegadas, Diapositivas de Info del Hotel).

¿Puedo cambiar colores basados en la hora (ej., modo nocturno)?

Actualmente no es automático. Puedes cambiar colores manualmente, pero no hay cambio basado en tiempo.

¿Qué colores funcionan mejor?

Color primario oscuro (#1E40AF) con color secundario claro (#3B82F6) para mejor contraste.

¿Puedo usar colores degradados?

No, solo se soportan colores sólidos. Los degradados no están soportados en el sistema.

Próximos Pasos

Después de personalizar colores:

Inspiración

Dónde Encontrar Ideas de Color:

Soporte

¿Preguntas sobre personalización de colores?