Skip to main content

Brand your event app: accent color, highlight color and appearance

C
Written by Customer Success

Choose the accent color, an optional highlight color, and the light or dark look of the mobile app and the web app. Brella checks custom colors for readability and blocks saving until they pass.

Before you start

  • You need to be an organization admin or an event admin.

  • Have the hex code of your brand color ready if you want a custom color.

  • The accent color also applies to most emails Brella sends for the event and to the event's pages in the admin panel.

Where to find it

Customization > Branding in the admin panel.

Set the colors and appearance

  1. Open Customization > Branding.

  2. Under Accent color, select a swatch. For your own color, select the last swatch (Custom color, with the palette icon) and pick or enter a hex color.

  3. Optional: turn on Highlight color and select a swatch or a custom color.

  4. Under Appearance, select Light or Dark.

  5. If a warning appears under a color, select Use #XXXXXX instead, choose another color, or switch the mode.

  6. Select Save changes. If the event is in progress, confirm with Apply changes.

The message "Color theme updated successfully" confirms the save.

Branding page with the Accent color swatches, the Highlight color switch, the Light and Dark cards and the phone preview

Readability checks

Curated colors are not checked. A custom color is checked for the selected mode against the parts of the app that use it:

  • Accent color: buttons on the page (at least 3:1), text on buttons (at least 4.5:1), links on the page (at least 4.5:1).

  • Highlight color: text on selected tags (at least 4.5:1), highlighted text (at least 4.5:1).

When a custom color passes, the text "Readable in light mode." (or "dark mode") appears under the swatches. When it fails:

  • A warning appears, for example "Accent color is hard to read in light mode", with the affected parts: "Affects buttons and links."

  • If a readable shade of the same hue exists, the warning offers Use #XXXXXX instead. Otherwise it says "Choose another color or switch to dark mode."

  • The Light or Dark card that fails shows a warning icon with the tooltip "Not readable with the current colors".

  • Save changes stays disabled until every check for the selected mode passes.

A failing custom accent color with the warning, the Use #XXXXXX instead button and the disabled Save changes button

On wide screens a phone preview shows the colors on a sample home page. With a custom color, the preview ends with Contrast in light mode (or dark mode): one meter per check, with the ratio and the required minimum in the tooltip.

The phone preview with the Contrast in light mode meters under it

Settings

Setting

What it does

Default

Accent color

"Used for buttons, links, tabs and other calls to action." A curated color or a custom hex color.

Teal

Highlight color

"Optional. Used for selected tags and highlighted matches, for example matching interests. Off means the accent color is used."

Off. Magenta is preselected when you turn it on.

Appearance

"Attendees see the app in this mode." Light or Dark.

Light

The admin panel offers a set of curated color swatches. The label under the swatches names the selection, for example "Teal (default)" or "Custom #1A73E8".

What attendees see

  • The mobile app and the web app use the accent color for buttons, links, tabs and other calls to action, and the highlight color (or the accent color) for selected tags and highlighted matches.

  • The whole app opens in the mode you chose. Attendees can't switch between light and dark mode themselves.

  • Emails Brella sends for the event use the accent color for buttons, links and borders. This includes invitation reminders, event reminders, meeting emails, announcements, meeting notification reminders and sponsor admin invitations. Where a template has a two-color gradient, the highlight color is the second color.

  • Custom emails get the accent color and the highlight color as merge variables. Whether they use them depends on your template.

  • The admin panel uses the accent color while you work in the event.

Limits

  • A custom color is a 6-digit hex code, for example #1A73E8. Transparency is not supported.

  • You can't save while a readability check fails in the selected mode.

  • Navigation-bar colors saved on the old Branding page are kept in the event data but can't be edited. The current apps don't use them.

Troubleshooting

Save changes is disabled
Nothing has changed, or a custom color fails a readability check in the selected mode. Select Use #XXXXXX instead, choose another color, or switch to the other mode.

A Light or Dark card shows a warning icon
Your custom colors are not readable in that mode. Change the color before switching to that mode.

The page looks different from before
The Branding page was rebuilt in September 2026. The navigation-bar colors are gone. A color saved as a hex code appears as a custom color; a saved curated color appears as its swatch.

Related articles

Did this answer your question?