# Cores

> A cor primária e a secundária da comunidade, cada uma com 11 tons gerados de uma cor base e ajustáveis tom a tom, a prévia, o aviso de contraste e como voltar ao padrão.

Cada comunidade tem as próprias cores, e elas pintam a interface inteira para todos os membros: botões, links, abas, destaques.

![O editor de cores](/screens/cores.png "Cores da comunidade: cor base, gerar tons, os 11 tons e a prévia.")

## Para que serve

Para a comunidade parecer **sua**: a escola com o laranja da marca, o coworking com o verde da fachada, a empresa com o azul do manual.

## Como funciona

### As duas escalas

| Escala | Onde aparece |
|---|---|
| **Cor primária** | *"Links, ícones, abas ativas, destaques e fundos suaves."* |
| **Cor secundária** | *"Os botões de ação principal."* |

Cada escala tem **11 tons**, do 50 (o mais claro) ao 950 (o mais escuro). O **tom 500** é a cor base. Os tons que a interface usa hoje aparecem em destaque; os outros completam a escala.

### Gerar tons

**Gerar tons** *"Preenche os 11 tons a partir da cor base. Depois disso, cada tom continua editável."* É um atalho: você pode ajustar cada tom depois.

### Contraste

Alguns tons são usados como fundo de texto branco. Se um deles ficar claro demais, aparece **Contraste baixo**: *"Estes tons são usados como fundo de texto branco e não alcançam a razão mínima de 4,5:1."* O botão **Escurecer automaticamente** corrige. Mesmo sem corrigir, a cor do texto dos botões é recalculada para continuar legível.

### Prévia

A **Prévia** mostra a **Ação principal**, o botão **Criar**, a **Aba ativa** e um **Destaque** com as cores escolhidas, antes de salvar.

### Voltar ao padrão

**Restaurar padrão** devolve as cores originais, a partir do momento em que você salvar.

### Quem pode

**Proprietário** e **administrador**.

## Passo a passo

*Papel: proprietário ou administrador.*

1. **Configurações › Geral › Cores da comunidade**.
2. Em **Cor primária › Cor base (tom 500)**, escolha a cor (ou digite o código, como `#e2187d`).
3. **Gerar tons**.
4. Repita em **Cor secundária**.
5. Se aparecer **Contraste baixo**, clique em **Escurecer automaticamente**.
6. Confira a **Prévia** e **Salvar Alterações**.

## Exemplos

**Escola com laranja.** Primária `#FD7A05` (links e abas), secundária `#C2410C` (botões, um laranja mais escuro para o texto branco ficar legível).

**Empresa com azul.** Primária `#2563EB`, secundária `#1E3A8A`.

## Dicas

- Use a cor da marca como primária e uma versão mais escura dela como secundária.
- Evite cores muito claras na secundária: os botões têm texto branco.
- Confira a comunidade no celular depois de salvar.

## Erros comuns e como resolver

| Situação | O que fazer |
|---|---|
| Os botões ficaram ilegíveis | **Escurecer automaticamente**, ou escolha uma secundária mais escura |
| Mudei e nada aconteceu | Faltou **Salvar Alterações** |
| Quero as cores originais | **Restaurar padrão** e salve |

## Perguntas frequentes

**Cada membro pode escolher as cores?**
Não. As cores são da comunidade.

**Dá para ter modo escuro?**
Não há modo escuro na comunidade.

## Relacionados

- [Configurações gerais](/configuracoes/configuracoes-gerais)
- [Imagens e SEO](/configuracoes/imagens-e-seo)