📖 Customization
      Back to home
      1. Help Center
      2. For Event Organizers
      3. 📖 Customization

      Customization: Color theme

      Customize the coloring theme of your event by using your own brand on the Brella Web App's UI elements.

      Your Brella event can host your brand colors to welcome and give participants the feeling you want them to remember forever. 

      ⭐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:

      Changing your event color theme

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

      1. Click on "Custom theme" 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. 

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

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

      4. Eventually, Brella will apply the chosen colors.

      Screen Recording 2021-02-22 at 17.25.50
      • This is how it will look in your Event Home Screen (Brella web app)

      Screenshot 2021-02-22 at 18.21.44

      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

            secondary-color-elements_2x

             

            Last updated on February 2021. 

            Written by Stephanie Campano Valenzuela. 

            Stephanie-rounded

            If you didn’t find an answer to your questions, please contact the Support Team here.

            👇