Personnaliser les Couleurs et Utiliser les Thèmes

Ajustez les couleurs de votre affichage pour correspondre à votre identité de marque

10 min de lectureDernière mise à jour : 1/15/2024189 found helpful

Personnalisation des Couleurs et Utilisation des Thèmes

Personnalisez les couleurs de votre affichage LobbyFlight pour correspondre parfaitement à l'identité de marque de votre hôtel. Ce guide couvre tout, de la personnalisation basique des couleurs aux thèmes avancés.

Comprendre le Système de Couleurs

Couleurs Primaires et Secondaires

LobbyFlight utilise deux couleurs principales pour le branding :

Couleur Primaire

  • Utilisée pour : Boutons, éléments actifs, accents
  • Exemple : Onglet actif "Départs"
  • Meilleur choix : Couleur principale de la marque de votre hôtel

    • Couleur Secondaire

  • Utilisée pour : Effets de survol, éléments secondaires
  • Exemple : Surlignage au survol d'un bouton
  • Meilleur choix : Version plus claire/plus foncée de la primaire

    • Rôles des Couleurs dans l'Affichage

    ┌─────────────────────────────────────────────────────────────┐
│  [Logo]  Nom de l'Hôtel              [Heure]  [Météo]       │
│─────────────────────────────────────────────────────────────│
│  [DÉPARTS]  Arrivées    ← Primaire : onglet actif           │
│─────────────────────────────────────────────────────────────│
│                                                             │
│  Lignes de vol... (texte blanc sur fond sombre)             │
│                                                             │
│─────────────────────────────────────────────────────────────│
│  Badges de statut :                                         │
│  [À l'heure] ← Vert   [Retardé] ← Orange   [Annulé] ← Rouge │
└─────────────────────────────────────────────────────────────┘

    Note : Les badges de statut (À l'heure, Retardé, Annulé) utilisent des couleurs standardisées pour un meilleur UX et ne sont pas personnalisables.

    Personnaliser les Couleurs

    Guide Étape par Étape

  • Connectez-vous au Portail

    • - Allez sur le portail de votre hôtel

    - Naviguez vers "Personnalisation"

  • Ouvrez les Paramètres de Branding

    • - Cliquez sur "Branding" dans le menu

    - Faites défiler jusqu'à "Couleurs de Marque"

  • Choisissez la Couleur Primaire

    • - Cliquez sur le sélecteur de couleur

    - Sélectionnez votre couleur ou entrez le code hexadécimal

    - Exemple : #1E40AF (bleu)

  • Choisissez la Couleur Secondaire

    • - Cliquez sur le deuxième sélecteur

    - Choisissez une couleur complémentaire

    - Exemple : #3B82F6 (bleu clair)

  • Prévisualisez et Enregistrez

    • - L'aperçu se met à jour automatiquement

    - Cliquez sur "Enregistrer les Couleurs"

    - Les changements apparaissent immédiatement sur l'affichage

    Utiliser le Sélecteur de Couleur

    Espace Colorimétrique

  • Cliquez n'importe où sur la palette de couleurs
  • Faites glisser pour ajuster la teinte et la saturation
  • Utilisez le curseur pour la luminosité

    • Code Hexadécimal

  • Entrez directement le code hex (#RRGGBB)
  • Exemple : #FF5733 pour orange
  • Les codes acceptent 3 ou 6 caractères (#F00 = #FF0000)

    • Valeurs RGB

  • Entrez les valeurs Rouge, Vert, Bleu séparément
  • Plage : 0-255 pour chaque canal
  • Exemple : RGB(30, 64, 175) = #1E40AF

    • Formats de Couleur Supportés

    FormatExempleDescription
    ------------------------------
    Hex#1E40AFFormat le plus courant
    RGBrgb(30, 64, 175)Composantes couleur
    HSLhsl(225, 71%, 40%)Teinte, Saturation, Luminosité

    Thèmes Prédéfinis

    LobbyFlight propose plusieurs thèmes prêts à l'emploi :

    Thèmes Disponibles

    Bleu Classique (par défaut)

    Primaire : #1E40AF
Secondaire : #3B82F6
Style : Professionnel, digne de confiance

    Vert Émeraude

    Primaire : #059669
Secondaire : #10B981
Style : Frais, naturel, haut de gamme

    Rouge Bourgogne

    Primaire : #991B1B
Secondaire : #DC2626
Style : Luxueux, audacieux, élégant

    Violet Royal

    Primaire : #6B21A8
Secondaire : #9333EA
Style : Sophistiqué, unique, mémorable

    Gris Anthracite

    Primaire : #374151
Secondaire : #6B7280
Style : Moderne, minimaliste, intemporel

    Or Premium

    Primaire : #B45309
Secondaire : #D97706
Style : Luxueux, exclusif, haut de gamme

    Appliquer un Thème

  • Allez dans Branding → Thèmes
  • Parcourez les thèmes disponibles
  • Cliquez sur "Aperçu" pour le voir
  • Cliquez sur "Appliquer" pour utiliser
  • Les couleurs sont automatiquement définies

    • Harmonie des Couleurs

    Créer des Combinaisons Harmonieuses

    Monochromatique

  • Utilisez des nuances de la même couleur
  • Exemple : Bleu foncé + Bleu clair
  • Conseil : Variez la luminosité, pas la teinte

    • Complémentaire

  • Couleurs opposées sur la roue chromatique
  • Exemple : Bleu + Orange
  • Conseil : Utilisez une couleur comme dominante

    • Analogue

  • Couleurs adjacentes sur la roue
  • Exemple : Bleu + Bleu-vert
  • Conseil : Maintient une apparence cohérente

    • Outils pour l'Harmonie des Couleurs

    Outils en ligne recommandés :

  • Adobe Color (color.adobe.com)
  • Coolors (coolors.co)
  • Paletton (paletton.com)

    • Comment les utiliser :

  • Entrez la couleur principale de votre marque
  • Choisissez un modèle d'harmonie
  • Obtenez des suggestions de couleurs secondaires
  • Copiez les codes hex

    • Accessibilité des Couleurs

    Directives de Contraste

    Ratio de contraste minimum :

  • Texte normal : 4.5:1 (WCAG AA)
  • Grand texte : 3:1 (WCAG AA)
  • Éléments d'interface : 3:1

    • Vérifier le contraste :

  • Utilisez des outils comme WebAIM Contrast Checker
  • Testez la couleur primaire contre le texte blanc
  • Assurez-vous de la lisibilité sur fond sombre

    • Couleurs Problématiques

    À éviter :

  • Jaune sur blanc (contraste faible)
  • Vert clair sur blanc (difficile à lire)
  • Rouge/vert seuls (daltonisme)

    • Alternatives recommandées :

  • Jaune → Or/Ambre plus foncé
  • Vert clair → Sarcelle ou vert foncé
  • Rouge seul → Ajouter des motifs ou icônes

    • Test pour le Daltonisme

    Outils :

  • Coblis (Color Blindness Simulator)
  • Chrome DevTools → Rendering → Emulate vision

    • Types courants :

  • Protanopie (rouge-aveugle)
  • Deutéranopie (vert-aveugle)
  • Tritanopie (bleu-aveugle)

    • Bonnes Pratiques

    À Faire

    ✅ Utilisez les couleurs de votre marque

  • La cohérence renforce la reconnaissance
  • Vérifiez votre guide de style de marque
  • Utilisez les codes hex officiels

    • ✅ Testez sur l'écran réel

  • Les couleurs apparaissent différemment selon les écrans
  • Vérifiez dans les conditions d'éclairage du hall
  • Testez de jour et de nuit

    • ✅ Gardez ça simple

  • Deux couleurs suffisent
  • Trop de couleurs distraie
  • L'information de vol est la priorité

    • À Éviter

    ❌ Couleurs néon ou très vives

  • Fatiguant pour les yeux
  • Apparence non professionnelle
  • Difficile à lire sur une période prolongée

    • ❌ Faible contraste

  • Texte illisible
  • Mauvaise accessibilité
  • Frustration des clients

    • ❌ Changer les couleurs trop souvent

  • Confond les clients réguliers
  • Perte de reconnaissance de marque
  • Surcharge de maintenance

    • Dépannage

    Les Couleurs Ne Se Mettent Pas à Jour

    Étapes de diagnostic :

  • Vérifiez que vous avez cliqué "Enregistrer"
  • Videz le cache du navigateur
  • Actualisez la page d'affichage (Ctrl+F5)
  • Attendez 30 secondes pour la propagation

    • Solutions :

  • Essayez un autre navigateur
  • Vérifiez la console pour les erreurs
  • Contactez le support si persistent

    • Les Couleurs Semblent Différentes

    Causes possibles :

  • Calibration de l'écran différente
  • Conditions d'éclairage
  • Profil de couleur du navigateur

    • Solutions :

  • Calibrez l'écran d'affichage
  • Testez dans l'environnement réel
  • Ajustez la couleur selon l'écran

    • Le Code Hex Ne Fonctionne Pas

    Vérifications :

  • Le format est-il correct ? (#RRGGBB)
  • Aucun espace ou caractère spécial ?
  • Le # est-il présent ?

    • Exemples corrects :

  • ✅ #1E40AF
  • ✅ #ff5733
  • ❌ 1E40AF (manque #)
  • ❌ #1E40A (un caractère manquant)

    • Exemples par Type d'Hôtel

    Hôtel Business

    Primaire : #1E3A8A (Bleu foncé)
Secondaire : #3B82F6 (Bleu clair)
Raison : Professionnel, digne de confiance

    Hôtel Boutique/Design

    Primaire : #6B21A8 (Violet)
Secondaire : #A855F7 (Violet clair)
Raison : Unique, mémorable, artistique

    Hôtel de Luxe

    Primaire : #78350F (Brun doré)
Secondaire : #D97706 (Or)
Raison : Exclusif, haut de gamme, élégant

    Hôtel Familial/Resort

    Primaire : #059669 (Vert)
Secondaire : #34D399 (Vert clair)
Raison : Amical, naturel, relaxant

    Hôtel Aéroport

    Primaire : #0EA5E9 (Bleu ciel)
Secondaire : #7DD3FC (Bleu ciel clair)
Raison : Voyage, ciel, international

    Support

    Besoin d'aide avec les couleurs ?

  • Email : info@lobbyflight.com
  • Téléphone : +43 650 753 1811
  • Chat en direct : Lundi-Vendredi, 9h00 - 18h00

    • Prochaines Étapes

    Après avoir personnalisé les couleurs :

  • Télécharger votre logo - Compléter le branding
  • Prévisualiser l'affichage - Voir les couleurs en action
  • Configurer le comportement - Finaliser les paramètres

    • Cet article vous a-t-il été utile ?

    Contact support

    Dans cet article

    Articles Connexes

    Télécharger et Gérer le Logo

    8 min de lecture

    Aperçu du Portail de Marque

    7 min de lecture