Color
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Crea esquemas de colores personales y más accesibles que comuniquen la jerarquía, el estado y la marca de tu producto. Cuando se diseña para wearables, el color juega un rol fundamental en la mejora de la legibilidad, la usabilidad, el atractivo visual y la expresión, especialmente en pantallas más pequeñas.
En los siguientes principios, se explica cómo usar el color en todos los temas.
Desarrolladas desde el color negro
Los relojes están diseñados con un fondo negro, en lugar del fondo teñido que usan los dispositivos telefónicos. Si bien los temas oscuros están diseñados para entornos con poca luz y los temas claros para la luz del día, las IU de los relojes deben funcionar sin problemas tanto de día como de noche. Por lo tanto, los tokens de color para relojes deben adaptarse específicamente.
Nuevos roles de color
El sistema de colores de Material 3 conserva la estructura de tres colores de elementos destacados y dos colores de superficie neutros, pero presenta colores de contenedor dentro de los roles de elementos destacados.
Estos nuevos roles permiten un mayor potencial expresivo sin interrumpir la jerarquía visual, lo que proporciona variaciones de color de la superficie con un croma más alto.
Los roles de contenedor son particularmente útiles para destacar estados, como botones de activación, o para proporcionar un diseño complementario cuando ya se usa el acento principal.
Significado semántico
En las IU de relojes, los colores deben comunicar el significado de forma clara e intuitiva. Por ejemplo, el rojo indica errores y el verde indica que se realizó correctamente, lo que ayuda a los usuarios a comprender rápidamente las acciones o los estados sin necesidad de explicaciones adicionales. Este uso semántico del color ayuda a los usuarios a navegar por tu IU y a tomar medidas con confianza.
Accesibilidad de color (cumplimiento del contraste)
En las IU de relojes, los colores deben comunicar el significado de forma clara e intuitiva. Por ejemplo, el rojo indica errores y el verde indica que se realizó correctamente, lo que ayuda a los usuarios a comprender rápidamente las acciones o los estados sin necesidad de explicaciones adicionales. Este uso semántico del color ayuda a los usuarios a navegar por tu IU y a tomar medidas con confianza.
Novedades
Hay actualizaciones sustanciales en el sistema de diseño visual y en la forma en que elevamos la expresión a través de las actualizaciones de nuestras bases de estilo, componentes y bibliotecas de diseño de tarjetas.
El sistema de colores expresivos de Material 3 incluye las siguientes características:
- Conjunto integrado de relaciones de colores accesibles
- Más de 28 roles de color asignados a componentes de Material
- Colores del tema oscuro integrados para compilar desde el negro
- Valores de color inhabilitados mejorados
- Colores de error adicionales
- Color de referencia estático con colores predeterminados asignados a cada rol de color
- Funciones de color dinámico, como el sistema/la cara de reloj y los temas de color basados en imágenes
Recursos
Para obtener más información, consulta los siguientes recursos.
Lineamientos de colores de Material Design
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-26 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-26 (UTC)"],[],[],null,["# Color\n\nCreate more accessible, personal color schemes communicating your product's\nhierarchy, state, and brand. When designing for wearables, color plays a crucial\nrole in enhancing legibility, usability, visual appeal, and expression,\nespecially on smaller screens.\n\nThe following principles explain how to use color across themes.\n\nBuild from black\n----------------\n\n\nWatches are designed with a black background, instead of the tinted background\nthat phone devices use. While dark themes are meant for low-light environments\nand light themes for daylight, watch UIs need to function seamlessly both day\nand night. Therefore, color tokens for watches must be specifically tailored. \n\n\u003cbr /\u003e\n\nNew color roles\n---------------\n\n\nThe Material 3 color system retains the structure of three accent colors and two\nneutral surface colors, but introduces container colors within the accent roles.\nThese new roles enable greater expressive potential without disrupting visual\nhierarchy, essentially providing surface color variations with increased chroma.\nContainer roles are particularly useful for highlighting states, such as toggle\nbuttons, or for providing complementary styling when the primary accent is\nalready utilized. \n\n\u003cbr /\u003e\n\nSemantic meaning\n----------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nColor accessibility (contrast compliance)\n-----------------------------------------\n\n\nIn watch UIs, colors need to communicate meaning clearly and intuitively. For\nexample, red indicates errors and green signals success, helping users quickly\nunderstand actions or states without needing extra explanation. This semantic\nuse of color helps users navigate your UI and take action with confidence. \n\n\u003cbr /\u003e\n\nWhat's new\n----------\n\nThere are substantial updates to the visual design system and how we elevate\nexpression throughout updates to our style foundations, components, and tiles\ndesign libraries.\n\nThe Material 3 Expressive color system includes the following features:\n\n- Built-in set of accessible color relationships\n- 28+ color roles mapped to Material components\n- Built-in dark theme colors for building from black\n- Improved disabled color values\n- Additional error colors\n- Static baseline color with default colors assigned to each color role\n- Dynamic color features, including System/Watch face, and image-based color themes\n\nResources\n---------\n\nTo learn more, view the following resources.\n\n### Material Design color guidelines\n\n\n[Learn about the latest best practices](https://material.io/color) for color schemes using Material 3\nExpressive. \n\n\u003cbr /\u003e"]]
