Customize the coloring theme of your event by using your own brand on the Brella Web App's UI elements.
Using our platform's customization feature for 'Color themes', you can add your brand colors on desktop and mobile app versions!
⭐Note!
Platform accessibility has to be considered when choosing event theme colors. To provide the best attendee experience in this regard, it's important for us to guide you in selecting user-friendly color themes for your audience. If the color theme selected doesn't have an acceptable accessibility level, Brella will suggest a similar color user-friendly during the process that you can use.
This article shows how to customize your event theme color:
- Change your event color theme
- Brella suggested colors
- Primary & Secondary colors in Brella (attendee view)
Changing your event color theme
On the first entry, the color theme is set to Default. To change the color theme:
- Go to the 'Customization' tab
- Click on "Custom theme" and also the subtab "Custom theme" below. This will unlock both Primary and Secondary color input fields.
The primary color will affect buttons, links, tabs, while the Secondary color will affect subtitles, other buttons, tabs, and others. See in detail here. -
Add the HEX color code to the field (ex. #5BBBCC or 5BBBCC) or manually choose a color using the color picker window.
-
Brella will analyze if the primary and secondary colors are a good fit. You will receive a feedback message with suggested colors very similar to your selection. You can quickly apply one of the offered colors by clicking on the swatch.
-
Eventually, Brella will apply the chosen colors.
This is how it will look in your Event Home Screen
👉 Web app
👉 Mobile app
Brella suggested colors
👉To provide the best attendee experience, your event UI should avoid readability issues when you are setting up the Color theme of your event.
Thus, to ensure you comply with the accessibility basics, we will check your input/color picker selection and show a feedback message with two alternative colors if the selected color has contrast issues.
Brella will show you a feedback message to guide you select a color that is legible by your attendees. For example:👇
Primary & Secondary colors in Brella
Once you save your event theme color, you can go to next.brella.io and review how and what components the primary and secondary colors are displayed in your event. Below find a quick list of the components that change per primary and secondary color.
Primary color
All the components that will change to the primary color in the web app:
- Call-to-action link texts
- Active tab label texts
- Active tab icon colors
- Primary buttons
- Active selectors (checkboxes, radio buttons)
- Notifications
- Announcement messages
- Hover color for active elements
- Secondary color
Secondary color
All the components that will change to the secondary color in the web app:
- Tags for Interests & Intentions
- Event checklist progress bar
- Secondary labels: Breakout Room's cards
Last updated on August 2021.
Written by Stephanie Campano Valenzuela.
If you didn’t find an answer to your questions, please contact the Support Team here.
👇