Farben anpassen und Themes verwenden

Die Farbanpassung ermöglicht es Ihnen, das Flight Display perfekt an Ihre Markenidentität anzupassen. Dieser Artikel erklärt, wie Sie Farben auswählen, Themes verwenden und eine konsistente visuelle Identität schaffen.

Farbsystem verstehen

Primärfarbe

Die Primärfarbe wird verwendet für:

Beispiele:

Sekundärfarbe

Die Sekundärfarbe wird verwendet für:

Empfehlung: Wählen Sie eine hellere Variante Ihrer Primärfarbe für beste Ergebnisse.

Farben anpassen

Schritt-für-Schritt-Anleitung

- Melden Sie sich im Hotel-Portal an

- Klicken Sie auf "Branding" in der Navigation

- Scrollen Sie zu "Brand Colors"

- Klicken Sie auf das Farbfeld "Primary Color"

- Wählen Sie eine Farbe im Farbwähler ODER

- Geben Sie einen Hex-Code ein (z.B. #1E40AF)

- Klicken Sie auf das Farbfeld "Secondary Color"

- Wählen Sie eine Farbe ODER

- Geben Sie einen Hex-Code ein

- Die Vorschau-Boxen zeigen Ihre Farben

- Überprüfen Sie den Kontrast

- Testen Sie verschiedene Kombinationen

- Klicken Sie auf "Save Colors"

- Änderungen werden sofort gespeichert

- Display wird beim nächsten Refresh aktualisiert

Farbwähler verwenden

Methode 1: Visueller Farbwähler

[CODE_BLOCK]

[CODE_BLOCK]

Methode 2: Hex-Code-Eingabe

[CODE_BLOCK]

[CODE_BLOCK]

Methode 3: RGB-Konverter

[CODE_BLOCK]

Wenn Sie RGB-Werte haben (z.B. RGB 30, 64, 175):

[CODE_BLOCK]

Vordefinierte Themes verwenden

8 vordefinierte Themes

Wir bieten 8 professionell gestaltete Themes:

1. Ocean Blue (Standard)

2. Forest Green

3. Royal Purple

4. Sunset Orange

5. Ruby Red

6. Midnight Blue

7. Emerald

8. Slate Gray

Theme auswählen

- Navigieren Sie zu "Branding" → "Brand Colors"

- Klicken Sie auf ein Theme-Button

- Farben werden automatisch angewendet

- Passen Sie die Farben nach Bedarf an

- Speichern Sie Ihre Änderungen

Farbharmonie und Best Practices

Kontrast überprüfen

Wichtig für Lesbarkeit:

Online-Tools:

Farbpsychologie

Blau (Ocean Blue, Midnight Blue):

Grün (Forest Green, Emerald):

Lila (Royal Purple):

Orange (Sunset Orange):

Rot (Ruby Red):

Grau (Slate Gray):

Farbkombinationen

Monochrom (Empfohlen):

[CODE_BLOCK]

Primärfarbe: Dunkler Ton (z.B. #1E40AF)

Sekundärfarbe: Hellerer Ton (z.B. #3B82F6)

Ergebnis: Harmonisch, professionell

[CODE_BLOCK]

Komplementär (Fortgeschritten):

[CODE_BLOCK]

Primärfarbe: Blau (#1E40AF)

Sekundärfarbe: Orange (#F97316)

Ergebnis: Kontrastreich, auffällig

Warnung: Kann zu stark wirken

[CODE_BLOCK]

Analog (Harmonisch):

[CODE_BLOCK]

Primärfarbe: Blau (#1E40AF)

Sekundärfarbe: Grün (#166534)

Ergebnis: Natürlich, beruhigend

[CODE_BLOCK]

Farben testen

Live-Vorschau

- Klicken Sie auf "Preview" im Portal

- Sehen Sie Ihre Farben live auf dem Display

- Desktop-Monitor

- Tablet

- 32" Android Display

- Smartphone (via QR-Code)

- Testen Sie bei hellem Licht (Lobby tagsüber)

- Testen Sie bei gedimmtem Licht (Lobby abends)

- Überprüfen Sie Reflexionen

A/B-Testing

Methode:

Fragen für Feedback:

Erweiterte Anpassungen

Hex-Code-Format

Gültiges Format:

Beispiele:

[CODE_BLOCK]

✅ #1E40AF (korrekt)

✅ #1e40af (korrekt, Kleinbuchstaben ok)

✅ #000000 (Schwarz)

✅ #FFFFFF (Weiß)

❌ 1E40AF (fehlt #)

❌ #1E40 (zu kurz)

❌ #1E40AFGG (zu lang)

❌ #ZZZZZZ (ungültige Zeichen)

[CODE_BLOCK]

Farben aus Logo extrahieren

Methode 1: Adobe Color:

Methode 2: Coolors.co:

Methode 3: Browser DevTools:

Automatische Sekundärfarbe

Tipp: Unsere Color Picker generiert automatisch eine passende Sekundärfarbe, wenn Sie die Primärfarbe ändern.

Algorithmus:

Beispiel:

[CODE_BLOCK]

Primär: #1E40AF (Dunkelblau)

↓ Automatisch generiert

Sekundär: #3B82F6 (Hellblau)

[CODE_BLOCK]

Fehlerbehebung

Farben werden nicht gespeichert

Problem: Änderungen gehen verloren

Lösung:

Farben erscheinen nicht auf dem Display

Problem: Display zeigt alte Farben

Lösung:

"Invalid color format" Fehler

Problem: Hex-Code wird nicht akzeptiert

Lösung:

Farben sehen anders aus als erwartet

Problem: Farben erscheinen anders auf dem Display

Mögliche Ursachen:

Lösung:

Barrierefreiheit

WCAG-Konformität

Mindestanforderungen:

Tools zum Testen:

Farbblindheit

Tipps:

Simulator-Tools:

Häufig gestellte Fragen

Kann ich mehr als 2 Farben verwenden?

Nein, das System unterstützt Primär- und Sekundärfarbe. Diese werden intelligent im gesamten Display angewendet.

Werden Farben auf allen Seiten gleich angewendet?

Ja, Farben gelten für das gesamte Display (Departures, Arrivals, Hotel Info Slides).

Kann ich Farben zeitbasiert ändern (z.B. Nacht-Modus)?

Derzeit nicht automatisch. Sie können Farben manuell ändern, aber kein zeitbasiertes Switching.

Welche Farben funktionieren am besten?

Dunkle Primärfarbe (#1E40AF) mit heller Sekundärfarbe (#3B82F6) für besten Kontrast.

Kann ich Gradient-Farben verwenden?

Nein, nur Solid Colors werden unterstützt. Gradienten werden im System nicht unterstützt.

Nächste Schritte

Nach der Farbanpassung:

Inspiration

Wo Sie Farbideen finden:

Support

Fragen zur Farbanpassung?