Usa colores para expresar estilo y comunicar significados. Configurar los colores de tu app puede ser fundamental para la personalización, la definición del propósito semántico y, por supuesto, la identidad de marca.
Puck robado
- Para garantizar la accesibilidad, haz lo siguiente:
- Comprueba el contraste de color y evita sincronizar colores con tonos similares.
- Ten en cuenta que el rojo y el verde son patrones comunes, pero tampoco los usuarios con ciertos tipos de daltonismo pueden acceder a ellos.
- Practica el uso significativo de colores: las apps pueden ser brillantes y expresivas, pero usa una paleta de colores. Extender tu esquema con demasiados colores semánticos puede ser confuso, mientras que tener demasiados colores decorativos puede ser abrumador.
- Los colores pueden tener patrones, así que repite los patrones de color establecidos. Si usas colores semánticos en la app, utiliza colores coherentes.
- Para permitir que tu app funcione bien en diferentes contextos, crea un esquema de colores claro y oscuro (y, idealmente, contrasta los temas).
- Asigna colores con tokens para indicar el rol de color del elemento, en lugar de usar un valor codificado.
- Los colores pueden provenir de varias fuentes dinámicas y estáticas, pero evita mezclar demasiados en la misma vista.
- Cuando uses color de contenido dinámico, evita extraer colores de varias piezas de contenido.
Espacio de color en Android
Para comprender correctamente la forma en que Android aplica color a tu IU, es importante reconocer primero cómo se muestra en un dispositivo.
Cómo se muestra el color en un dispositivo
Tu app se muestra en una pantalla retroiluminada, que usa color digital y cumple con ciertos modelos y reglas que ayudan a nuestros ojos a percibir ese color. El color digital es un color aditivo que se crea mediante la "agregación" o la combinación de diferentes luces para crear un espectro completo de color. La forma en que las personas perciben los colores de una pantalla a otra puede variar mucho según la calibración del color del dispositivo, el tipo de pantalla, la configuración y el espacio de color.
Cuando diseñes una app, ten en cuenta que los colores que se usan podrían no ser idénticos debido a estos factores, sin mencionar las percepciones únicas de los colores de los usuarios individuales.
Información acerca de los espacios de color
Un espacio de color es una organización de colores que usa un modelo de color. RGB es un modelo de color aditivo que crea el espectro de colores a través del rojo, el verde y el azul, mientras que el CMYK, que se usa para las impresiones, es resta. Por este motivo, los diseñadores interactivos suelen usar modelos RGB o similares para elegir colores.
Material 3 (M3) introdujo HCT, un nuevo espacio de color que usa tono, croma y tono para definir colores que son perceptualmente precisos en comparación con otros modelos, como HSL
Para obtener más información sobre la ciencia del color y el desarrollo de HCT, lee La ciencia del color y el diseño.
Tono, croma y tono
HCT permite usos del color más personalizados y flexibles que se mantienen dentro de los parámetros del sistema. HCT modela colores mediante matiz, croma y tono:
- Matiz: El matiz es análogo al adjetivo que un usuario individual podría usar para describir el color, por ejemplo, "rojo" o "violeta eléctrico". El valor de HCT del matiz varía entre 0 y 360.
- Chroma: El croma representa el colorido del color, que va desde el gris neutro hasta la intensidad completa. En el espacio de color de HCT, la croma tiene un valor máximo de alrededor de 120.
- Tono: El tono es la luminancia, o brillo, de un color. HCT usa el tono para crear contraste. Los colores establecidos con el mismo valor de tono no son accesibles para ciertos contextos de accesibilidad. Los tonos de valores más bajos son más oscuros y los tonos de valores más altos son más brillantes.
Proceso del sistema de colores
El color de M3 se basa en el modelo HCT para derivar esquemas de colores accesibles armoniosos y ayuda a mejorar los atributos de color dinámicos. El sistema de colores de M3 comienza a partir de un color de origen. Este color de origen se traduce en cinco colores clave: primario, secundario, terciario, neutro y variante neutra. Estos cinco colores clave crean paletas tonales compuestas de incrementos tonales para cada color clave.
Si asignas un color de clave manualmente, ten en cuenta el croma y el tono de la entrada, ya que es posible que el tono del color no sea el valor tonal de la función del color.
El sistema de colores de M3 cuenta con la tecnología de Material Color Utilities (MCU), un conjunto de bibliotecas de color que contienen algoritmos y utilidades que facilitan el desarrollo de temas y esquemas de color en tu app.
En el siguiente video, se describe cómo se derivan los esquemas de colores.
Limitaciones de color
Las limitaciones de color son los límites físicos del color, ya sea la física real, nuestras propias limitaciones visuales biológicas o las limitaciones de la renderización de color en pantalla. Por ejemplo, algunos tonos no pueden existir con determinados tonos o croma. Las limitaciones de color son la razón por la que no son posibles colores como el celeste o el rojo claro brillante. La asignación de color de tono debe ser coherente en todos los valores de tono.
En la figura anterior, se muestran tres gráficos de mapeo de tonos diferentes para los valores de tono de H105, H25 y H285.
Gráfico 1–matiz 105 (amarillo). Indica la disponibilidad del color. La croma y el tono funcionan como un gráfico. El matiz amarillo tiene una croma limitada con ciertos tonos a lo largo del gráfico. El amarillo no tiene un amplio rango de intensidad para los tonos más bajos.
Gráfico 2–matiz 25 (rojo). Muestra más opciones cromáticas que el tono 105 (amarillo). En este mapa de tonos, el punto de mayor coloración se encuentra en un nivel de tono más bajo.
Gráfico 3 – tono 285 (azul). Muestra que el color más alto se encuentra en un tono aún más oscuro. Por el contrario, la capacidad de croma se pierde en un tono más claro.
Esquema de colores
Un esquema de colores es el conjunto de acentos y superficies derivados de tonos específicos y asignados a roles de color, que luego se asignan a elementos y componentes de la IU. Los roles de color se refieren al uso del color, en lugar de al matiz del color. Por ejemplo, en el modo principal en lugar de en el azul.
Los esquemas de colores están diseñados para ser armoniosos, garantizar la accesibilidad del texto y distinguir los elementos y las superficies de la IU entre sí. Los pares de funciones de color (compuestos por funciones de contenedor y en contenedor) tienen valores tonales que proporcionan contraste accesible.
Se crean esquemas claro y oscuro, y tienen sus propias asignaciones de tonos específicas.
El sistema de colores y los esquemas personalizados de Material proporcionan valores predeterminados para el color como punto de partida para la personalización.
Obtén más información sobre el sistema de colores de M3.
Para obtener un esquema de colores personalizable, explora el kit de IU de Android.
Aplica color a tu IU
El color de la IU consta de los colores de los elementos destacados, los semánticos y los de superficie.
- Los colores de los elementos destacados hacen referencia a los colores principales que suelen formar parte de la paleta de colores de la marca Android.
- Los colores semánticos (o colores personalizados dentro de Material 3) son colores con un significado específico.
- Los colores de superficie se refieren a cualquier color derivado neutro que se utiliza para los colores de fondo.
Color de los elementos destacados
Por lo general, los colores de los elementos destacados presentan la mayor expresividad dentro de una IU, ya sea para desarrollo de la marca, destacando acciones, expresión personal o expresión del usuario.
Cada color de acento (primario, secundario y terciario) se proporciona en un grupo de cuatro a ocho colores compatibles de diferentes tonos para la vinculación, la definición del énfasis y la expresión visual.
Color dinámico
Los colores de los elementos destacados se pueden definir a partir de fuentes dinámicas.
A partir de Android 12 (nivel de API 31), el color dinámico permite que el sistema extraiga un color de origen del fondo de pantalla o el contenido de la app del usuario, como un recurso de keyart. El color dinámico usa algoritmos y procesos de MCU para crear esquemas y, luego, implementarlos con poco esfuerzo. Para aplicar colores dinámicos a tu app, consulta Cómo permitir que los usuarios personalicen su experiencia de color en tu app.
Prueba el codelab sobre Cómo visualizar el color dinámico para obtener una vista práctica de un color dinámico.
Estático
Un esquema estático es un esquema que tiene valores inalterables (o relativamente). Una forma común de crear un esquema estático es con los colores de la marca y alinear los colores primario, secundario y terciario con la paleta de colores principal de la marca.
Incluso si usas color dinámico, te recomendamos que crees un esquema estático como resguardo si el color dinámico no está disponible para el dispositivo del usuario. De lo contrario, el sistema utiliza el esquema de color púrpura de referencia.
Con Material Theme Builder, puedes aplicar el algoritmo de color de MCU para generar un tema estático y personalizado. De esta manera, se obtienen los colores que elegiste, pero que están alineados con los tokens del sistema de colores y los principios de accesibilidad armoniosos de M3.
Aún es posible crear un esquema estático completamente personalizado. Para ello, asigna diferentes valores dentro de los estilos de color (color.kt o color.xml) o exporta el archivo de tema desde Material Theme Builder para Figma después de actualizar las propiedades de estilo de Figma.
Uso
Los componentes de Material tienen roles de color asignados, pero puedes usar tokens de color en toda tu IU y elementos personalizados. Usa todos los colores de los elementos destacados con cuidado, teniendo en cuenta que el ojo humano se siente particularmente atraído por los colores brillantes.
Al igual que con los tipos, el sistema aplica color en una jerarquía, con el color principal y sus respectivas funciones asignadas a llamadas a la acción (CTA) cruciales. Recomendamos componentes como los botones de acción flotante (BAF) para que desempeñen los roles principales.
Cuando elijas un color principal, es una buena idea asignar el color primario de tu marca. Como alternativa, puedes seleccionar un color para representar los componentes interactivos, lo que permite que los colores de tu marca se usen con mayor moderación. Los colores secundarios y terciarios continúan en la jerarquía de destacar la importancia.
Una apariencia sobresaturada puede provocar que se usen solo las funciones de color base: primaria, secundaria o terciaria. Para facilitar la jerarquía de colores, aplica esquemas de colores a fin de incluir colores de contenedores menos vibrantes y funciones de contorno.
Para garantizar una mejor experiencia del usuario, usa colores primarios más brillantes para indicar acciones de mayor importancia en la jerarquía visual de tu app. En la siguiente figura, el BAF de la primera imagen tiene un color apagado con el mismo tono y croma que la navegación, por lo que se mezcla. La segunda imagen muestra un BAF que llama más la atención con un color primario brillante.
Si quieres probar el color dinámico de manera práctica, prueba el codelab para personalizar el color de Material.
Color semántico
Los colores semánticos son aquellos que tienen significados específicos. Por ejemplo, Error es un color semántico.
Sé coherente con el significado del color; si estableces un patrón, repítelo en toda la app. Por ejemplo, si estableciste el color púrpura para indicar una función de membresía, úsalo en todas las instancias de esta función de membresía.
En el siguiente ejemplo, una app usa el rojo para indicar un error en un campo de texto, pero el púrpura en el otro; esto causaría confusión cuando se hojea un formulario.
Si bien el esquema de colores de Material proporciona el color de error semántico, se crean colores semánticos adicionales mediante colores personalizados para extender tu esquema de colores. Obtén más información sobre los colores personalizados.
La unificación proporciona una forma de alinear los colores dinámicos generados por el usuario con los colores personalizados dentro de tu app para crear paletas de colores más armoniosas.
Colores de superficie
Los colores de superficie están diseñados para elementos de fondo, como contenedores de componentes, hojas y paneles, y representan la mayoría de los colores de tu app. No dudes en usar mucho espacio en la superficie; el ojo humano necesita espacio para relajarse. Las plataformas también ayudan a incluir contenido y dirigir al lector.
M3 introdujo el concepto de superficies tonales, lo que significa que todos los colores derivan de las paletas tonales. Los tonos crean profundidad y contraste para ayudar a mejorar la accesibilidad. Para obtener más información sobre las funciones de plataforma, consulta la guía sobre M3 de las funciones de superficie.
Accesibilidad y color
Las personas ven el color de varias maneras según su agudeza visual. Debido a que algunos lectores son daltónicos, debes verificar las combinaciones de colores para asegurarte de que los elementos de la IU no se mezclen. Si bien es posible que la opacidad y el peso no sean el tono literal de un color, tienen un fuerte efecto visual en la manera en que los usuarios perciben el color.
El contraste de color es la diferencia entre la luminancia de los elementos en primer y segundo plano, presentada en un formato de proporción. A este criterio de proporción se le otorgan calificaciones. Por ejemplo, medir el contraste entre el texto de un botón y su contenedor ayuda a determinar la legibilidad del texto. Los lineamientos de contraste de color se dividen en texto y no texto, cada uno con su propio conjunto de calificaciones. Consulta Cómo diseñar con colores accesibles para obtener más detalles.
Nunca hagas que el color sea el único indicador o único de una acción disponible. Usa un botón de componente, un cambio de grosor de fuente o incluso un ícono para informar al usuario que puede interactuar con el elemento.
Cómo implementar el color
Los tokens son representaciones semánticas pequeñas de variables de datos de diseño. Se pueden repetir y reemplazar los valores estáticos, como los códigos hexadecimales para el color, por nombres autoexplicables. Para asignar el rol de color de un elemento, usa tokens en lugar de valores de color hard-coded.
Consulta la muestra de Now in Android en Figma para ver ejemplos de asignación de roles de color.
Los valores de color se establecen dentro de un archivo de color color.kt mediante Compose (o color.xml con Views). Estos colores configurados como estilos forman parte de un tema. Obtén más información sobre este tema en Diseña para temas de Android para dispositivos móviles.
Para establecer los valores de color en Android, usa el código hexadecimal, que representa RGB en un formato de 6 dígitos. Para capturar la opacidad, agrega el valor al frente para crear un código de 8 dígitos.
Uso de Material Theme Builder:
Puedes crear esquemas de colores claros y oscuros personalizados con Material Theme Builder (MTB).
MTB te permite visualizar colores dinámicos, generar tokens de Material Design y personalizar tus esquemas de colores.
El esquema de colores se puede personalizar por completo actualizando las propiedades de estilo en el panel del inspector de Figma. Se exportan estos valores modificados.
