Color Scheme Help Guide

Color Scheme Help Guide

Color Schemes

In the admin portal under Branding -> Color Schemes, you can personalize your app with colors to match the other branding at your event.  There are 3 types of color schemes:  Primary, Secondary, and Tertiary.  The following shows what is affected when each color scheme is selected.

Primary Color 

The primary color is used for most headers and buttons in the app.   The hexadecimal value is selected from the color picker in the admin portal (Figure 1) to select

  1. The primary color.
  2. The text on the primary colored headers and buttons.

In the app, the headers and buttons now have the colors selected in Figure 1:

More examples are as follows:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Secondary Color 

The secondary color is used to highlight specific buttons, such as the button and text in the left-hand menu in the app or highlightning special agenda sessions or special exhibitors/sponsors.   The hexadecimal value is selected from the color picker in the admin portal (Figure 3) to select. Note: It is not recommended to use White as the secondary color. This color is used in the side navigation to display the name which will not be seen if the color is White (FFFFFF).

  1. The secondary color.
  2. The text on the secondary colored headers and buttons.

Figure 4 shows the secondary colors in the app:

More examples are as follows:

Tertiary Colors

The tertiary color is used sparingly throughout the app.  The hexadecimal value is selected from the color picker in the admin portal (Figure 5) to select

  1. The tertiary color.
  2. The text on the tertiary colored headers and buttons.

Figure 6 shows the tertiary color is used to identify the user's connection code.

Default Button Color

Figure 7 shows the default button color, the default button text color, default text and the text input background color. The recommended default button color is a light grey; however, for the sake of example, yellow has been selected.  This applies to the agenda sessions, for example, and all buttons in the app.  The default button text color is the color of the text on the button.  The default text color is the color of all the text throughout the app and the text input background color is the color of the input fields in the event (profile, evaluations). Note: if a dark color is used for the default button color such as Black (000000), it will make some of the text hard to read, especially on the Exhibitor/Sponsor listing and Agenda, even if you use White as the text. Using White as the default text will make some words "invisible" such as the side navigation. For best results, use the recommended colors or something close to the same hue for both the Default Button color and Default Text.

 

More examples of the default button color:

Button color for the agenda sessions

Button color for attachments in the app

Button color for the evaluate button.


    • Related Articles

    • Color Scheme

      Color Scheme Select your app color scheme to splash your branding throughout the app. We recommend playing with this section and testing your app on the front to ensure the best look. The images in this section will provide examples of how this is ...
    • How to add Animated GIFs to your Branding

      Go to Branding > Header Rotators > Add Rotator > Basic. Once the basic information in entered, you must first update the settings on the advanced screen before adding your animated header/footer, see instructions below. Click on the Header tab to add ...
    • App Icon, Splash Page, and Background Images

      App Icon See below for a description on how the app icon is used based on your app plan. Premium Event App: If you have a native app, you can add your own app icon through the Admin Portal to appear under the Apple App Store and Google Play listings. ...
    • Header and Footer Rotators

      Header Rotators Header rotators appear at the top of your app. Most commonly, they introduce the app or event. After you click Branding, the first screen you will be taken to is your app’s header rotators. To get to Footer Rotators, simply click the ...
    • Event URL and Web App QR code

      URL The event/company URL allows you to access the app via the web. R@H will populate the URL prior to sending the app Welcome email, however, you do have the ability to change it. If you have an Unlimited/Membership app, the URL will be at the ...