Estilos Color
Color
El sistema de color de Material 3 parte de un solo color semilla y genera paletas tonales y roles de color para modo claro y oscuro, con contraste accesible.
Sistema de color
Elige un color semilla arriba: toda la app de ejemplo cambia. Así funciona el sistema: no se eligen 30 colores sueltos, se elige uno y el sistema calcula el resto con reglas fijas. Cambia también entre modo claro y oscuro.
Semilla
Un color de marca o tomado de una imagen.
Paletas tonales
De la semilla salen 5 paletas, cada una con 13 tonos del negro al blanco.
Roles
Cada parte de la interfaz toma un tono según su rol y el modo (claro u oscuro).
Roles de color
Un rol dice para qué sirve un color, no cuál es. "Primary" es el color de las acciones principales; "on-primary" es el color del texto que va encima. Los pares siempre tienen buen contraste entre sí.
| Rol | Para qué sirve |
|---|---|
| primary / on-primary | Botón relleno, FAB, elementos activos |
| primary-container / on-primary-container | Botón tonal, chips seleccionados, fondos de énfasis suave |
| secondary / tertiary | Acentos de menor jerarquía y contraste con el principal |
| error | Mensajes y bordes de error |
| surface y surface-container (5 niveles) | Fondos de pantalla, tarjetas, hojas y diálogos |
| on-surface / on-surface-variant | Texto principal y secundario |
| outline / outline-variant | Bordes y divisores |
Paletas tonales
Cada paleta tiene 13 tonos: 0 es negro, 100 es blanco. El modo claro usa tonos medios (40) para los colores principales y tonos altos (90–99) para fondos; el modo oscuro hace lo contrario.
Esta guía calcula las paletas con el espacio de color OKLCH, una aproximación al espacio HCT que usa Google. Los tonos pueden variar un poco frente a la herramienta oficial (Material Theme Builder).
Color dinámico
En Android 12 o superior, la app puede tomar su semilla del fondo de pantalla del usuario. Toca una imagen para ver cómo cambia todo el esquema.
Ojo con el color dinámico
Si la marca exige un color fijo (el azul institucional, por ejemplo), no se usa color dinámico, o se usa solo para colores secundarios.
Contraste
Los pares de roles se calculan para que el texto se lea. La WCAG pide al menos 4,5:1 para texto normal y 3:1 para texto grande y bordes de controles.
En CSS
Este es el esquema que estás viendo, listo para copiar: