El sistema de color expresivo de Wear Material 3 emplea tres capas de color de énfasis (primario, secundario y terciario) para los componentes clave y dos capas de superficie neutras. Cada rol ofrece un rango de valores con un contraste coherente, lo que permite combinaciones de colores expresivas y accesibles para una experiencia unificada en cualquier tema.
¿Qué son los roles de color?
Los roles de color son como los "números" en un lienzo de pintar por números. Son el tejido conectivo entre los elementos de la IU y qué color va dónde.
- Los roles de color se asignan a los componentes de Material: Usarás estos roles de color ya sea que uses el esquema de referencia estático o el color dinámico. Si tu producto contiene componentes personalizados, deberán asignarse correctamente a este conjunto de roles de color.
- Los roles de color admiten la accesibilidad: El sistema de color se basa en combinaciones de colores más accesibles. Estos pares de colores proporcionan un contraste de color mínimo de 3:1.
- Los roles de color se tokenizan: Los roles se implementan en el diseño y el código a través de tokens. Un token de diseño representa una pequeña decisión de diseño reutilizable que forma parte del estilo visual de un sistema de diseño.
Condiciones esenciales
Estos son los términos clave que verás en los nombres de los roles de color:
- Surface: Es un rol que se usa para los fondos y las áreas grandes de la pantalla con poco énfasis.
- Colores primario, secundario y terciario: Roles de color de énfasis que se usan para destacar o quitar énfasis en los elementos de primer plano.
- Contenedor: Roles que se usan como color de relleno para elementos en primer plano, como botones. No se deben usar para texto ni íconos.
- Activado: Los roles que comienzan con este término indican un color para el texto o los íconos sobre el color principal asociado. Por ejemplo, el color On Primary se usa para el texto y los íconos sobre el color de relleno primario.
- Variante: Los roles que terminan con este término ofrecen una alternativa con menos énfasis que su par no variante. Por ejemplo, la variante de contorno es una versión menos enfatizada del color de contorno.
Roles principales
Los roles principales se usan para los componentes clave de la IU, como los botones de borde, los botones destacados, los estados activos y los íconos en los estilos de botones tonales.
Principal
- Principal
- On-Primary
Usa el rol Primario para las acciones más importantes de la IU, como los botones principales o los llamados a la acción. Este color debe destacarse y ser reconocible al instante para guiar al usuario hacia las interacciones clave.
Primary-Dim
- Primary-Dim
- On-Primary
Por lo general, los roles atenuados se usan para elementos que deben distinguirse visualmente de la acción principal, pero no requieren la atención o interacción inmediata del usuario.
Primary-Container
- Primary-Container
- On-Primary-Container
Aplica el color del contenedor principal para los elementos en segundo plano, como tarjetas o modales, para destacar secciones o estados seleccionados. Ayuda a llamar la atención sobre el contenido importante o las actividades en curso dentro de la IU.
Roles secundarios
Los roles secundarios se usan para los componentes clave de la IU, que no son tan importantes como el rol principal, pero que aún deben destacarse. Los colores primario y secundario se pueden usar juntos en los diseños para crear diferenciación y enfoque.
Secundaria
- Secundario
- On secundario
Usa el rol secundario para acciones de asistencia en áreas con una IU densa, como botones secundarios o acciones complementarias. Mantiene la visibilidad sin eclipsar los elementos principales en diseños complejos.
Secondary-Dim
- Secondary-Dim
- Secundario
El rol Secondary-Dim ofrece un contraste atenuado para los elementos pasivos en áreas densas. Complementa el color secundario y agrega una profundidad sutil, lo que mantiene la IU limpia y ayuda a los usuarios a navegar.
Secondary-Container
- Secondary-Container
- On-Secondary-Container
Aplica Secondary-Container para organizar elementos secundarios en diseños densos. Crea estructura y separación, lo que garantiza que el contenido secundario sea distinguible, pero no dominante.
Roles terciarios
Los roles terciarios se usan para contrastar los acentos y equilibrar los colores primarios y secundarios, o dirigir la atención hacia un elemento, como un campo de entrada. Los roles terciarios también pueden ayudar a indicar cuándo cambia el contenido o cuándo debe destacarse, como cuando se alcanza un objetivo.
Tertiary
- Terciario
- On-Tertiary
El rol terciario se usa para llamar la atención sobre los elementos clave. Los roles terciarios son especialmente eficaces para los componentes que deben destacarse, como las insignias, las calcomanías o los elementos de acción especiales.
Tertiary-Dim
- Tertiary-Dim
- Terciario
Usa el rol Tertiary Dim para los botones o las acciones que se relacionan con acciones secundarias, pero no requieren un enfoque inmediato.
Tertiary-Container
- Tertiary-Container
- On-Tertiary-Container
Aplica Tertiary-Container para los fondos que agrupan contenido relacionado con el terciario, como colecciones de insignias o calcomanías. Enfatiza los elementos terciarios y, al mismo tiempo, mantiene el equilibrio y la estructura en la IU.
Roles semánticos
El color rojo de error se usa para indicar problemas críticos, como errores, eliminaciones y cualquier otro asunto relacionado con emergencias. Está diseñado para llamar la atención de inmediato sobre los problemas o las advertencias, lo que garantiza que los usuarios puedan identificar rápidamente las áreas que requieren una acción correctiva. El tono de Error-Red debe mantener un contraste suficiente con los fondos para cumplir con los estándares de accesibilidad, lo que garantiza que sea claramente visible y se distinga de otros colores de estado, como las advertencias o los mensajes de éxito.
Error
- Error
- On-Error
Un color rojo semántico, pero ligeramente teñido, que indica acciones de quitar, borrar, cerrar o descartar, como Deslizar para revelar. Se agregó como alternativa de contenedor, que es un poco menos alarmante y urgente que el color atenuado de error.
Error-Dim
- Error-Dim
- On-Error
Un color rojo semántico, pero ligeramente teñido, que indica errores de alta prioridad o acciones de emergencia, como alertas de seguridad, superposiciones de diálogo fallidas o botones de detener.
Error-Container
- Error-Container
- On-Error-Container
Color del contenedor menos destacado para los componentes que usan el estado de error. También puede indicar un estado de error activo que se siente menos interactivo que un estado completado, como un botón o una tarjeta de uso compartido de emergencia activos, o en un diálogo de superposición fallido.
Contenedores de superficie y elevación
Los contenedores de superficie son clave para definir la profundidad y la elevación dentro de la IU, ya que proporcionan estructura y jerarquía a través del color, lo que ayuda a diferenciar los componentes según su importancia e interacción.
Surface-Container-Low
- Surface-Container-Low
- On-Surface
- On-Surface-Variant
Es ideal para un contenedor expandido que debe ubicarse debajo de Surface-Container, como una tarjeta expandida en la notificación. También se puede usar para tarjetas no interactivas, en las que el contenido sigue beneficiándose de la contención.
Surface-Container
- Surface-Container
- On-Surface
- On-Surface-Variant
Es el color del contenedor predeterminado para la mayoría de los elementos. Proporciona una elevación neutra y moderada, lo que la hace adecuada para los componentes de la IU generales.
Surface-Container-High
- Surface-Container-High
- On-Surface
- On-Surface-Variant
Ideal para componentes de gran énfasis que deben colocarse sobre Surface-Container o en combinación con él. Este color ayuda a enfocar y jerarquizar las áreas críticas de la IU.