# Colores

> El color primario y el secundario de la comunidad, cada uno con 11 tonos generados a partir de un color base y ajustables uno a uno, la vista previa, el aviso de contraste y cómo volver a los valores predeterminados.

Cada comunidad tiene sus propios colores, y estos pintan toda la interfaz para todos los miembros: botones, enlaces, pestañas, destacados.

![El editor de colores](/screens/cores.png "Colores de la comunidad: color base, generar tonos, los 11 tonos y la vista previa.")

## Para qué sirve

Para que la comunidad parezca **tuya**: la escuela con el naranja de la marca, el coworking con el verde de la fachada, la empresa con el azul del manual de marca.

## Cómo funciona

### Las dos escalas

| Escala | Dónde aparece |
|---|---|
| **Color primario** | *"Enlaces, iconos, pestañas activas, destacados y fondos suaves."* |
| **Color secundario** | *"Los botones de acción principal."* |

Cada escala tiene **11 tonos**, del 50 (el más claro) al 950 (el más oscuro). El **tono 500** es el color base. Los tonos que la interfaz usa hoy aparecen destacados; los demás completan la escala.

### Generar tonos

**Generar tonos** *"Rellena los 11 tonos a partir del color base. Después, cada tono sigue siendo editable."* Es un atajo: puedes ajustar cada tono después.

### Contraste

Algunos tonos se usan como fondo de texto blanco. Si uno de ellos queda demasiado claro, aparece **Contraste bajo**: *"Estos tonos se usan como fondo de texto blanco y no alcanzan la relación mínima de 4,5:1."* El botón **Oscurecer automáticamente** lo corrige. Aunque no lo corrijas, el color del texto de los botones se recalcula para que siga siendo legible.

### Vista previa

La **Vista previa** muestra la **Acción principal**, el botón **Crear**, la **Pestaña activa** y un **Destacado** con los colores elegidos, antes de guardar.

### Volver a los valores predeterminados

**Restaurar valores predeterminados** devuelve los colores originales, a partir del momento en que guardes.

### Quién puede

El **propietario** y los **administradores**.

## Paso a paso

*Rol: propietario o administrador.*

1. **Configuración › General › Colores de la comunidad**.
2. En **Color primario › Color base (tono 500)**, elige el color (o escribe el código, como `#e2187d`).
3. **Generar tonos**.
4. Repite en **Color secundario**.
5. Si aparece **Contraste bajo**, haz clic en **Oscurecer automáticamente**.
6. Revisa la **Vista previa** y **Guardar Cambios**.

## Ejemplos

**Escuela en naranja.** Primario `#FD7A05` (enlaces y pestañas), secundario `#C2410C` (botones, un naranja más oscuro para que el texto blanco se lea bien).

**Empresa en azul.** Primario `#2563EB`, secundario `#1E3A8A`.

## Consejos

- Usa el color de la marca como primario y una versión más oscura como secundario.
- Evita colores muy claros en el secundario: los botones llevan texto blanco.
- Revisa la comunidad en el móvil después de guardar.

## Errores frecuentes y cómo resolverlos

| Situación | Qué hacer |
|---|---|
| Los botones han quedado ilegibles | **Oscurecer automáticamente**, o elige un secundario más oscuro |
| He cambiado los colores y no ha pasado nada | Faltó **Guardar Cambios** |
| Quiero los colores originales | **Restaurar valores predeterminados** y guarda |

## Preguntas frecuentes

**¿Cada miembro puede elegir los colores?**
No. Los colores son de la comunidad.

**¿Hay modo oscuro?**
No hay modo oscuro en la comunidad.

## Relacionados

- [Configuración general](/configuracoes/configuracoes-gerais)
- [Imágenes y SEO](/configuracoes/imagens-e-seo)