Paleta de color
Esta paleta de color comprende los colores primarios y de acento que pueden ser utilizados para las ilustraciones o para el desarrollo de los colores de tu marca. Han sido diseñados para trabajar armoniosamente entre ellos.
La paleta de colores empieza con los colores primarios y llena el espectro para crear una útil y completa paleta para Android, la Web e iOS. Google sugiere usar los colores 500 como los colores primarios en tu app y los otros colores como colores de acento.
Visita la web oficial en inglés si quieres copiar algún color en concreto y no has utilizado el archivo XML mencionado anteriormente.
Aplicación del color en la Interfaz de Usuario
Elige tu paleta
Limita tus colores a tres matices de la paleta principal y uno de acento de la paleta secundaria. El color de acento puede o no necesitar opciones de reserva.
Usa valores de opacidad (alpha) para los textos grises, iconos y divisores.
Para transmitir la jerarquía de la información de tu app, puedes usar diferentes opacidades para tus textos. El valor estándar de opacidad para un texto sobre un fondo blanco es del 87% (#000000). Los textos secundarios, los cuales son de menor valor dentro de la jerarquía visual, deberían usar un valor del 54% (#000000). Los textos de apoyo como los que se utilizan en los campos de texto y etiquetas, los cuales tienen una menor prominencia visual aún, deberían usar un valor para la opacidad del 26% (#000000).
Otros elementos, como los iconos y divisores, también se benefician de tener un valor de opacidad en lugar de usar un color solido, para poder asegurarse de que estos se vean bien en cualquier fondo independientemente del color del mismo.
Texto oscuro sobre fondos claros
Para el texto oscuro sobre un fondo claro, lo más importante del texto es que tenga una opacidad del 87%. El texto secundario al tener una menor importancia en la jerarquía visual, tiene un 54%. Los textos indicios como los de los EditText, tienen incluso una menor importancia y por tanto una opacidad del 26%.
|
Texto Oscuro (#000000) |
Opacidad |
|
Texto Principal |
87% |
|
Texto Secundario |
54% |
|
Indicios (Campos de Texto, etc) |
26% |
Texto blanco sobre fondos oscuros
Los valores de la tabla cambian un poco respecto al texto oscuro sobre un fondo claro.
|
Texto Claro (#FFFFFF) |
Opacidad |
|
Texto Principal |
100% |
|
Texto Secundario |
70% |
|
Indicios (Campos de Texto, etc) |
30% |
Texto sobre fondos con color
Para el texto blanco o negro sobre fondos con color, echa un vistazo a las tablas de las paletas de color para los ratios de contraste apropiados y los valores del alpha.
Otros elementos
Otros elementos, como los iconos y los divisores, se benefician de tener un valor hexadecimal del negro o blanco así que funcionan sobre fondos de cualquier color.
Barra de herramientas (Toolbar) y las barras de estado (Status bars).
Las Toolbars y los bloques grandes deberían usar el color primario de 500, de ahora en adelante Color Primary 500, y este debería ser el color principal de tu app. La barra de estado debería usar uno un poco más oscuro, el Color Primary 700.
Un buen uso del color en los elementos grandes de la interfaz de usuario es estimulante para el usuario. Los diferentes elementos en la interfaz de usuario pueden tomar diferentes partes de tu tema de color.
Color de acento (Color Accent)
Usa el Color Accent para tu botón de acción principal y otros componentes como Switches o Sliders.
Colores acento de reserva
Si tu Color Accent es demasiado claro u oscuro para los colores del fondo, la regla general para los colores de reserva es elegir uno más claro u oscuro del Color Accent. Si este no funciona en ninguno, usa el Color Primary 500 sobre fondos blancos. Si el fondo es el Color Primary 500, usa el blanco con la opacidad al 100% o el negro al 54%.
Temas
Los temas te permiten aplicar un tono coherente a una app. El tema especifica la oscuridad sobre las superficies, el nivel de sombra, la opacidad apropiada o los elementos de tinta.
Para crear una buena consistencia entre apps, hay dos temas disponibles: Claro y Oscuro (Light y Dark).
Relacionado
Tema Claro
- Barra de Estado (Status Bar)
- Barra de la App (App Bar)
- Fondo (Background)
- Tarjetas /Diálogos (Cards/Dialogs)
Tema Oscuro
Puedes ver más información sobre Color en la página oficial de Google en inglés pulsando aquí.