# Colori

> Il colore primario e quello secondario della community, ciascuno con 11 tonalità generate da un colore base e regolabili una per una, l'anteprima, l'avviso di contrasto e come tornare ai valori predefiniti.

Ogni community ha i propri colori, che danno il tono all'intera interfaccia per tutti i membri: pulsanti, link, schede, elementi in evidenza.

![L'editor dei colori](/screens/cores.png "Colori della community: colore base, genera tonalità, le 11 tonalità e l'anteprima.")

## A cosa serve

Perché la community sembri **tua**: la scuola con l'arancione del marchio, il coworking con il verde della facciata, l'azienda con il blu del manuale d'identità.

## Come funziona

### Le due scale

| Scala | Dove compare |
|---|---|
| **Colore primario** | *"Link, icone, schede attive, evidenziazioni e sfondi tenui."* |
| **Colore secondario** | *"I pulsanti di azione principale."* |

Ogni scala ha **11 tonalità**, dalla 50 (la più chiara) alla 950 (la più scura). La **tonalità 500** è il colore base. Le tonalità che l'interfaccia usa oggi sono messe in evidenza; le altre completano la scala.

### Genera tonalità

**Genera tonalità** *"Compila tutte le 11 tonalità a partire dal colore base. Ogni tonalità resta comunque modificabile."* È una scorciatoia: puoi regolare ogni tonalità in seguito.

### Contrasto

Alcune tonalità sono usate come sfondo per testo bianco. Se una di esse è troppo chiara, compare **Contrasto basso**: *"Queste tonalità sono usate come sfondo per testo bianco e non raggiungono il rapporto minimo di 4,5:1."* Il pulsante **Scurisci automaticamente** corregge il problema. Anche senza correggere, il colore del testo dei pulsanti viene ricalcolato per restare leggibile.

### Anteprima

L'**Anteprima** mostra l'**Azione principale**, il pulsante **Crea**, la **Scheda attiva** e un elemento **In evidenza** con i colori scelti, prima di salvare.

### Tornare ai valori predefiniti

**Ripristina i valori predefiniti** riporta i colori originali, dal momento in cui salvi.

### Chi può farlo

**Proprietario** e **amministratore**.

## Passo dopo passo

*Ruolo: proprietario o amministratore.*

1. **Impostazioni › Generale › Colori della community**.
2. In **Colore primario › Colore base (tonalità 500)**, scegli il colore (oppure scrivi il codice, come `#e2187d`).
3. **Genera tonalità**.
4. Ripeti in **Colore secondario**.
5. Se compare **Contrasto basso**, clicca su **Scurisci automaticamente**.
6. Controlla l'**Anteprima** e **Salva Modifiche**.

## Esempi

**Scuola in arancione.** Primario `#FD7A05` (link e schede), secondario `#C2410C` (pulsanti, un arancione più scuro perché il testo bianco resti leggibile).

**Azienda in blu.** Primario `#2563EB`, secondario `#1E3A8A`.

## Consigli

- Usa il colore del marchio come primario e una sua versione più scura come secondario.
- Evita colori molto chiari per il secondario: i pulsanti hanno il testo bianco.
- Dopo aver salvato, controlla la community sul telefono.

## Errori comuni e come risolverli

| Situazione | Cosa fare |
|---|---|
| I pulsanti sono diventati illeggibili | **Scurisci automaticamente**, oppure scegli un secondario più scuro |
| Ho cambiato i colori e non è successo nulla | Mancava **Salva Modifiche** |
| Voglio i colori originali | **Ripristina i valori predefiniti** e salva |

## Domande frequenti

**Ogni membro può scegliere i colori?**
No. I colori appartengono alla community.

**Esiste una modalità scura?**
Nella community non c'è una modalità scura.

## Correlati

- [Impostazioni generali](/configuracoes/configuracoes-gerais)
- [Immagini e SEO](/configuracoes/imagens-e-seo)