Customize Colors and Use Themes

Customize Colors and Use Themes

Color customization allows you to perfectly match the Flight Display to your brand identity. This article explains how to select colors, use themes, and create a consistent visual identity.

Understanding the Color System

Primary Color

The primary color is used for:

Examples:

Secondary Color

The secondary color is used for:

Recommendation: Choose a lighter variant of your primary color for best results.

Customizing Colors

Step-by-Step Guide

- Log in to the Hotel Portal

- Click on "Branding" in the navigation

- Scroll to "Brand Colors"

- Click on the "Primary Color" color field

- Choose a color in the color picker OR

- Enter a hex code (e.g., #1E40AF)

- Click on the "Secondary Color" color field

- Choose a color OR

- Enter a hex code

- The preview boxes show your colors

- Check the contrast

- Test different combinations

- Click on "Save Colors"

- Changes are saved immediately

- Display will be updated on the next refresh

Using the Color Picker

Method 1: Visual Color Picker

1. Click on the colored square
2. Move the cursor in the color spectrum
3. Adjust brightness/saturation
4. Color is automatically applied

Method 2: Hex Code Entry

1. Click on the text field
2. Enter a 6-digit hex code
3. Format: #RRGGBB (e.g., #1E40AF)
4. Press Enter to apply

Method 3: RGB Converter

If you have RGB values (e.g., RGB 30, 64, 175):
1. Use an RGB-to-Hex converter
2. Example: https://www.rgbtohex.net/
3. Convert RGB to Hex
4. Enter the hex code

Using Predefined Themes

8 Predefined Themes

We offer 8 professionally designed themes:

1. Ocean Blue (Default)

2. Forest Green

3. Royal Purple

4. Sunset Orange

5. Ruby Red

6. Midnight Blue

7. Emerald

8. Slate Gray

Selecting a Theme

- Navigate to "Branding" → "Brand Colors"

- Click on a theme button

- Colors are automatically applied

- Adjust the colors as needed

- Save your changes

Color Harmony and Best Practices

Checking Contrast

Important for Readability:

Online Tools:

Color Psychology

Blue (Ocean Blue, Midnight Blue):

Green (Forest Green, Emerald):

Purple (Royal Purple):

Orange (Sunset Orange):

Red (Ruby Red):

Gray (Slate Gray):

Color Combinations

Monochromatic (Recommended):

Primary color: Darker tone (e.g., #1E40AF)
Secondary color: Lighter tone (e.g., #3B82F6)
Result: Harmonious, professional

Complementary (Advanced):

Primary color: Blue (#1E40AF)
Secondary color: Orange (#F97316)
Result: High contrast, eye-catching
Warning: Can be too strong

Analogous (Harmonious):

Primary color: Blue (#1E40AF)
Secondary color: Green (#166534)
Result: Natural, calming

Testing Colors

Live Preview

- Click on "Preview" in the portal

- See your colors live on the display

- Desktop monitor

- Tablet

- 32" Android display

- Smartphone (via QR code)

- Test in bright light (lobby during daytime)

- Test in dim light (lobby in the evening)

- Check for reflections

A/B Testing

Method:

Feedback Questions:

Advanced Customization

Hex Code Format

Valid Format:

Examples:

✅ #1E40AF (correct)
✅ #1e40af (correct, lowercase ok)
✅ #000000 (Black)
✅ #FFFFFF (White)

❌ 1E40AF (missing #)
❌ #1E40 (too short)
❌ #1E40AFGG (too long)
❌ #ZZZZZZ (invalid characters)

Extracting Colors from Logo

Method 1: Adobe Color:

Method 2: Coolors.co:

Method 3: Browser DevTools:

Automatic Secondary Color

Tip: Our Color Picker automatically generates a matching secondary color when you change the primary color.

Algorithm:

Example:

Primary: #1E40AF (Dark Blue)
↓ Automatically generated
Secondary: #3B82F6 (Light Blue)

Troubleshooting

Colors Not Saving

Problem: Changes are lost

Solution:

Colors Not Appearing on Display

Problem: Display shows old colors

Solution:

"Invalid color format" Error

Problem: Hex code is not accepted

Solution:

Colors Look Different Than Expected

Problem: Colors appear different on the display

Possible Causes:

Solution:

Accessibility

WCAG Compliance

Minimum Requirements:

Testing Tools:

Color Blindness

Tips:

Simulator Tools:

Frequently Asked Questions

Can I use more than 2 colors?

No, the system supports primary and secondary colors. These are intelligently applied throughout the display.

Are colors applied the same on all pages?

Yes, colors apply to the entire display (Departures, Arrivals, Hotel Info Slides).

Can I change colors based on time (e.g., night mode)?

Not currently automatic. You can change colors manually, but no time-based switching.

Which colors work best?

Dark primary color (#1E40AF) with light secondary color (#3B82F6) for best contrast.

Can I use gradient colors?

No, only solid colors are supported. Gradients are not supported in the system.

Next Steps

After customizing colors:

Inspiration

Where to Find Color Ideas:

Support

Questions about color customization?