El framework de colores expresivos de Material 3 usa temas de colores dinámicos, basados en dos colores iniciales asignados en el sistema de colores HCT (matiz, croma y tono).
Términos esenciales
- Rol de color
- Al igual que los "números" en un lienzo para pintar por números, los roles de color se asignan a elementos específicos de la IU. Tienen nombres como primario, en primario y contenedor primario. Se usa el mismo rol de color para los temas claro y oscuro. Consulta todos los roles de color
- HCT
- HCT significa tono, croma y matiz.
Define colores con tono, croma y matiz (HCT)
Generador de colores HCT que crea un conjunto de paletas de colores a partir de un color inicial para crear un modelo de color tridimensional que define los colores en función de su tono (color), croma (saturación) y tono (luminosidad)
Hay tres colores de contraste principales: primario, secundario y terciario. Los tonos neutros, como varios tonos de gris con un toque de color primario, son ideales para usar como colores de contenedor para contenido enriquecido debido a su naturaleza monocromática.
Tonalidad
El tono es la percepción de un color, como rojo, naranja, amarillo, verde, azul y violeta. El tono se cuantifica con un número que varía de 0 a 360 y es un espectro circular (los valores 0 y 360 tienen el mismo tono).
Croma
El croma indica qué tan colorido o neutro (gris, negro o blanco) es un color. El croma se cuantifica con un número que varía de 0 (completamente gris, negro o blanco) a infinito (más vibrante), aunque los valores de croma en HCT alcanzan un máximo de alrededor de 120.
Debido a las limitaciones biológicas y de renderización de la pantalla, los diferentes tonos y matices tendrán diferentes valores máximos de cromatismo.
Tono
El tono indica qué tan claro o oscuro es un color. A veces, el tono también se conoce como luminancia. El tono se cuantifica con un número que varía de 0 (negro puro, sin luminancia) a 100 (blanco puro, luminancia completa).
El tono es fundamental para la accesibilidad visual porque determina el contraste. Los colores con una mayor diferencia de tono crean un contraste más alto, mientras que los que tienen una diferencia menor crean un contraste más bajo.
Color dinámico (temas de color)
Wear OS implementa un sistema de temas que cumple con los Lineamientos de Accesibilidad para el Contenido Web (WCAG)-AAA, que se derivan de dos colores iniciales designados. Específicamente, estos colores iniciales sirven como base para las paletas principales y tertiarias. Con estos dos colores iniciales, el sistema genera una paleta de colores integral que abarca las paletas primarias, secundarias, terciarias y de la superficie. Luego, este tema generado se aplica a los componentes, los elementos de la IU del sistema, las tarjetas y las apps de Wear OS.
Según tus preferencias, puedes usar un color inicial específico o un color de marca para derivar tu color dinámico.
Desde el color inicial
El color dinámico creará automáticamente un esquema de colores accesible basado en un color inicial específico.
Debido a que la IU podría terminar con cualquier cantidad de colores de origen diferentes, es mejor diseñar inicialmente con el esquema de colores del modelo de referencia para asegurarte de que los roles de color correctos se asignen a los componentes correctos de tu producto. Usa Material Theme Builder para ver cómo se ven tus simulaciones de IU en una variedad de colores de origen y ajusta la configuración según sea necesario.
Paleta de colores (de los colores iniciales de la cara de reloj)
Tema de color aplicado a una tarjeta
Tema de color aplicado a la pantalla de una app
A partir del color de la marca
De manera similar a la forma en que Material 3 Expressive trata los roles de color, Wear OS aplica el color a experiencias individualizadas con una expresión de color dinámica y accesible. Wear OS solo usa el tema oscuro porque la interfaz del wearable se compila sobre un fondo negro. Como es una plataforma que se ejecuta en dispositivos táctiles, Wear OS también tiene una paleta de colores más limitada, ya que no requiere tantos estados de desplazamiento y enfoque. Usa las herramientas de compilación de temas de colores específicos de Wear OS para crear un tema personalizado para tu marca y generar las paletas de referencia completas y los roles de color asignados que admiten tokens de Material Design y están diseñados para funcionar sin problemas con los componentes de la IU del sistema.
Paleta de colores (de los colores iniciales del material gráfico)
Tema de color aplicado a una tarjeta
Tema de color aplicado a la pantalla de una app