# Colors

> The community's primary and secondary colors, each with 11 shades generated from a base color and adjustable one by one, the preview, the contrast warning and how to go back to the default.

Every community has its own colors, and they paint the whole interface for every member: buttons, links, tabs, highlights.

![The color editor](/screens/cores.png "Community colors: base color, generate shades, the 11 shades and the preview.")

## What they're for

To make the community look like **yours**: the school in its brand orange, the coworking space in the green of its storefront, the company in the blue from its brand guide.

## How it works

### The two scales

| Scale | Where it shows |
|---|---|
| **Primary color** | *"Links, icons, active tabs, highlights and soft backgrounds."* |
| **Secondary color** | *"The main action buttons."* |

Each scale has **11 shades**, from 50 (the lightest) to 950 (the darkest). **Shade 500** is the base color. The shades the interface uses today are highlighted; the others complete the scale.

### Generate shades

**Generate shades** *"Fills all 11 shades from the base color. Every shade stays editable afterwards."* It's a shortcut: you can fine-tune each shade later.

### Contrast

Some shades are used as a background for white text. If one of them is too light, **Low contrast** appears: *"These shades are used as a background for white text and fall below the 4.5:1 minimum ratio."* The **Darken automatically** button fixes it. Even if you don't fix it, the button text color is recalculated so it stays readable.

### Preview

The **Preview** shows the **Main action**, the **Create** button, the **Active tab** and a **Highlight** in the colors you picked, before you save.

### Back to the default

**Restore default** brings back the original colors, once you save.

### Who can

The **owner** and **admins**.

## Step by step

*Role: owner or admin.*

1. **Settings › General › Community colors**.
2. In **Primary color › Base color (shade 500)**, pick the color (or type its code, like `#e2187d`).
3. **Generate shades**.
4. Repeat under **Secondary color**.
5. If **Low contrast** appears, click **Darken automatically**.
6. Check the **Preview** and **Save Changes**.

## Examples

**A school in orange.** Primary `#FD7A05` (links and tabs), secondary `#C2410C` (buttons, a darker orange so white text stays readable).

**A company in blue.** Primary `#2563EB`, secondary `#1E3A8A`.

## Tips

- Use your brand color as the primary and a darker version of it as the secondary.
- Avoid very light secondary colors: buttons have white text.
- Check the community on your phone after saving.

## Common errors and how to fix them

| Situation | What to do |
|---|---|
| The buttons became unreadable | **Darken automatically**, or pick a darker secondary |
| I changed it and nothing happened | You didn't click **Save Changes** |
| I want the original colors | **Restore default** and save |

## Frequently asked questions

**Can each member choose the colors?**
No. The colors belong to the community.

**Is there a dark mode?**
There is no dark mode in the community.

## Related

- [General settings](/configuracoes/configuracoes-gerais)
- [Images and SEO](/configuracoes/imagens-e-seo)