---
title: Change site colors
description: "Set brand colors in the palette so buttons, links, and badges follow automatically."
url: "https://flatsome.com/docs/site-colors"
lastUpdated: 2026-09-30
---

Colors are set once in global styles and picked up by every block, so buttons, links, badges, form fields, and sale labels follow your brand without editing each page.

## Change the palette

1. Open the Builder and choose **Styles** in the top toolbar, then **Colors**.
2. Under **Brand**, set **Primary** and **Secondary**.
3. Under **Status**, set **Success**, **Warning**, and **Error** for notices and form messages.
4. Under **Neutrals**, set **Base** (page background), **Surface**, **Muted**, **Border**, and **Divider**.
5. Save.

Each color has a matching contrast color for text placed on it. It is calculated automatically; to set it yourself, select a color, open its **Foreground** tab, and choose **Override**. Choose **Use auto** to go back.

## What the primary color drives

Buttons, links, focus rings, active menu items, badges, progress bars, icon boxes, form checkboxes and switches, and the accent on the mini cart all use the primary color by default. The secondary color is available on any block for accents such as sale badges and secondary buttons.

## Dark mode and custom colors

- Toggle **Light** and **Dark** at the top of a color's editor to set a separate value for dark backgrounds and dark color schemes.
- **Custom colors** adds extra named colors to the picker, handy for a third brand color that a few blocks use.
- **Gradients** holds reusable gradients for section and banner backgrounds.

Pick a palette color on a block instead of typing a hex value. That way the block follows the palette when you change it later. The setup wizard sets the primary, secondary, success, and error colors when it imports a demo; everything above can be changed afterwards.