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 visual marker for small brand-colored UI accents.

Before you start

• A role with the Look & Feel permission.
• Your brand’s primary color as a six-digit hex value (for example #0B5CFF). Each field pairs a color-picker swatch with a hex box, so you can pick visually instead.
• 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 on the left or type a hex value into the field next to it. The agent UI re-themes live as soon as the hex is complete, so you see the change before saving. A contrast readout under the field tells you how the color scores against button text — it is advice, not a block.
4. Optionally, set an Accent color (optional). 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 changes in the page header to persist. The header shows Unsaved changes until you do.

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

Optional: customize link colors

If your primary brand color is hard to read as link text, the Link color card lower down the same page lets you set links separately. Turn on Set link color separately — off by default, in which case links simply take the primary color — then set Link color and Dark link color, check the contrast readouts, and save. This applies to links in messages only; buttons, tabs and every other accent keep the primary color.

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

Your primary color also remains the default link color unless you enable the separate Link color switch.

The accent color, if set, acts as a secondary brand mark for non-text indicators such as attention dots and similar small brand-colored UI accents. Atender keeps hover and selection surfaces neutral so menus and other interactive areas stay readable.

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. All six color values are cleared, so the app falls back to its shipped ink palette rather than to a stored brand color — the picker then shows its #171921 placeholder, which is a default seed, not a saved value. The accent clears, manual dark-mode overrides are wiped, and custom link colors are turned off. Unlike the color fields, this reset saves immediately without the Save changes button.

Verify it worked

• The Save changes button stops showing its spinner and the Unsaved changes marker disappears. There is no success toast — Look & feel only raises a toast when something goes wrong.
• 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. The contrast readout under the field names the target it is failing (4.5:1 on button text).

• 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