---
title: "Set your website's brand colours"
url: "https://mycommunitysync.com/set-your-site-brand-colors"
community: "CommunitySync"
description: "The two colours that theme your whole site — the accent and the dark colour — and how contrast is handled for you."
updated: "2026-07-18T18:45:00.616+00:00"
---

# Set your website's brand colours

*Website Design*

Your whole website is themed by just two colours: an accent colour and a dark colour. Set them once and they flow through every block — links, buttons, highlights, and every dark band on the site. This keeps your site looking consistent without you having to colour each section by hand.

## The two colours that theme your site

- **Primary (accent)** — your highlight colour. It paints links, buttons,
  highlights, and the background of any section set to the "Brand" surface.
- **Dark / secondary** — the colour of every dark band on the site: the hero,
  calls-to-action, the footer, and any section set to the "Dark" surface. Leave
  it empty and it falls back to a near-black default.

That's the whole system. There is intentionally no per-element or per-section custom colour — you pick two colours and the site stays coherent everywhere. For how sections choose between the Brand, Dark, and light surfaces, see [Section backgrounds](/section-backgrounds).

## Set your brand colours

1. Open your website in the full-screen editor.
2. In the left icon rail, click **Nav & footer**.
3. Expand the **Brand colours** section. It sits at the top of the panel, above the Navbar and Footer sub-tabs, because these colours apply to the whole site — not just the nav or footer.
4. Set **Primary (accent)** — click the swatch to pick a colour, or type a hex value directly.
5. Set **Dark / secondary** the same way. Leave it empty to use the near-black default.
6. Click **Save nav & footer**.

![The Brand colours section at the top of the Nav & footer tab](https://iaktsmonietvbikzietg.supabase.co/storage/v1/object/public/site-assets/kb/b2-brand-colors.png "Brand colours sit at the top of the Nav & footer tab: a Primary (accent) and a Dark/secondary colour theme the whole site.")

To undo a colour, use **Clear** on that field — it reverts to the theme's default colour.

## These colours save live

This is the one thing to keep in mind: **Brand colours save straight to the public site the moment you click Save nav & footer.** There is no separate publish step for them. If you're experimenting, know that visitors see the change right away.

## Text contrast is handled for you

You don't set text colours. Whatever accent or dark colour you choose, the text on top of it is adjusted automatically so it stays readable. That's why there's no per-element colour control — the system guarantees contrast for you.

One consequence worth knowing: if you pick a **dark** accent colour, it won't tint a dark band. On a dark section a dark accent shows as plain white instead. The site deliberately avoids muddy dark-on-dark tints, so it falls back to clean white.

## Brand colours vs. your community branding

The colours here are your website's own accent and dark colour. Your community's overall branding — the palette used across the member portal and everywhere else in CommunitySync — is set separately. Changing one does not change the other.

## Troubleshooting

### My accent turned white on a dark section
Your accent colour is itself dark, so it can't stand out against a dark band. Rather than show an unreadable dark-on-dark tint, the site paints it plain white. Pick a brighter, higher-contrast accent if you want it to show as a colour on dark sections.

### My colour change isn't showing
Make sure you clicked **Save nav & footer** — the **Brand colours** section shares that save button with the rest of the Nav & footer tab. Once saved, the change is live; if you still don't see it, refresh the public page.

### I want to recolour just one section
That isn't available by design — the whole site is themed from these two colours so it stays consistent. What you can change per section is which surface it uses (Brand, Dark, or light). See [Section backgrounds](/section-backgrounds).

### Website Design

- [Change a section's background (light, dark, brand, image, or gradient)](https://mycommunitysync.com/section-backgrounds.md)
- [Style the buttons on your site](https://mycommunitysync.com/style-your-buttons.md)
- [Choose a theme for your website](https://mycommunitysync.com/choose-a-theme.md)
- [Fine-tune fonts, corners, and spacing](https://mycommunitysync.com/fine-tune-website-style.md)