Customize your brand colors

The Brand Colors card on Settings → Look & Feel lets you pick a primary color (and an optional accent color) that style the Atender agent UI. The primary color drives buttons, selected tabs, focus rings, the sidebar accent, and chart accents. The accent color, if set, adds a secondary highlight.

Before you start

• A role with the Look & Feel permission.
• Your brand’s primary color in hex form (for example #2CACA0). The color picker also accepts visual selection.
• Optionally, a secondary accent color in hex form.

Steps

1. Open Settings → Look & Feel.
2. Scroll to the Brand Colors card.
3. Under Primary Color, either pick a color from the swatch box on the left or type a hex value into the field next to it (for example #2CACA0). The agent UI updates live so you can see the change before saving.
4. Optionally, set an Accent Color. Pick from the swatch or type a hex value. Leave it blank if you don’t want a secondary accent.
5. Use the Preview pane below to check how buttons, badges, tabs, hover states, and message bubbles look. Toggle between Light and Dark to see both modes.
6. Click Save Colors to persist the change.

The save invalidates the cached settings and the new colors apply across the agent UI for everyone on your tenant.

What the colors actually drive

Your primary color sets the following pieces of the agent UI:

• Primary buttons (and their hover and active states)
• Selected tabs
• Active sidebar items
• Focus rings on inputs
• Accent badges and active-state pills
• Agent-side message bubbles in the conversation view
• The first color in analytics charts

The accent color, if set, drives elements that use the --accent CSS variable (for example accent badges and hover backgrounds in certain menus).

Atender automatically picks a readable foreground color (light or dark text) for each background based on WCAG contrast ratio — so you don’t have to think about whether your primary is dark or light.

Reset to defaults

If you’ve drifted from the defaults and want to start over:

1. In the Preview pane, click Reset to Defaults.
2. The primary returns to #2CACA0 (Atender teal), the accent clears, and any manual dark-mode overrides are wiped. The reset saves immediately.

Verify it worked

• The Save Colors button stops showing a loading state.
• The toast says “Settings saved.”
• Buttons, tabs, and sidebar accents across the app reflect your new color.
• A new browser tab loads the app with the same colors (confirming it persisted).

Troubleshooting

• Symptom: Colors revert after I click Save. Fix: A save failure causes Atender to roll back the change. Check your network connection or browser console for the error and retry. The toast on failure says “Failed to save settings.”

• Symptom: My color looks fine in light mode but wrong in dark mode. Fix: Atender derives a dark-mode variant from your light color, but the derived shade isn’t always what you’d pick manually. Use the dark-mode color overrides — see Fine-tune dark-mode colors.

• Symptom: Text on top of my colored buttons is hard to read. Fix: Atender picks foreground (text) color automatically based on contrast. If readability still suffers, your primary color is probably very close to medium lightness — try a darker or lighter variant.

• Symptom: The Web Chat widget or KB portal didn’t pick up my color. Fix: Those surfaces have their own branding. Look & Feel only styles the agent UI. Configure the Web Chat widget’s brand color in Settings → Channels → Web Chat, and the KB portal’s branding in Knowledge Base → Layout & Branding.

See also

• What is Look & Feel?
• Fine-tune dark-mode colors
• Upload your workspace logo