📖 Customization

Customization: Color theme

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!


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:

Changing your event color theme

On the first entry, the color theme is set to Default. To change the color theme:

  1. Go to the 'Customization' tab
  2. 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

    color theme subtab
  3. Add the HEX color code to the field (ex. #5BBBCC or 5BBBCC) or manually choose a color using the color picker window.

  4. 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.

  5. Eventually, Brella will apply the chosen colors.

HubSpot Video

This is how it will look in your Event Home Screen

👉 Web app

Screenshot 2021-02-22 at 18.21.44

👉 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:👇

       customizations -feedback message

    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.