Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Цветовая система Wear Material 3 Expressive использует три акцентных слоя (первичный, вторичный, третичный) для ключевых компонентов и два нейтральных поверхностных слоя. Каждая роль предлагает ряд значений с постоянным контрастом, что позволяет создавать выразительные, но доступные цветовые комбинации для единого опыта в любой теме.
Пример цветовой темы с ролями.
Что такое цветовые роли?
Цветовые роли подобны «числам» на холсте с раскрашиванием по номерам. Они являются соединительной тканью между элементами пользовательского интерфейса и определяют, какой цвет куда следует наносить.
Цветовые роли сопоставлены с компонентами Material: вы будете использовать эти цветовые роли, независимо от того, используете ли вы статическую базовую схему или динамический цвет. Если ваш продукт содержит пользовательские компоненты, их необходимо правильно сопоставить с этим набором цветовых ролей.
Цветовые роли поддерживают доступность: Цветовая система построена на более доступных цветовых парах. Эти цветовые пары обеспечивают цветовой контраст минимум 3:1.
Цветовые роли токенизированы: Роли реализуются в дизайне и коде через токены. Токен дизайна представляет собой небольшое, повторно используемое решение дизайна, которое является частью визуального стиля системы дизайна.
Основные термины
Вот ключевые термины, которые вы увидите в названиях цветовых ролей:
Поверхность: роль, используемая для фона и больших, слабо акцентированных областей экрана.
Первичный, вторичный, третичный: акцентные цветовые роли, используемые для подчеркивания или затемнения элементов переднего плана.
Контейнер: Роли, используемые в качестве цвета заливки для элементов переднего плана, таких как кнопки. Их не следует использовать для текста или иконок.
On: Роли, начинающиеся с этого термина, указывают цвет для текста или иконок поверх его парного родительского цвета. Например, on primary используется для текста и иконок против основного цвета заливки.
Вариант: Роли, заканчивающиеся этим термином, предлагают менее акцентированную альтернативу своей невариантной паре. Например, вариант контура — это менее акцентированная версия цвета контура.
Основные роли
Основные роли используются для ключевых компонентов пользовательского интерфейса, таких как кнопки Edge Hugging, выступающие кнопки, активные состояния и значки в тональных стилях кнопок.
Начальный
Начальный
На-основном
Используйте роль Primary для самых важных действий в пользовательском интерфейсе, таких как основные кнопки или призывы к действию. Этот цвет должен выделяться и быть мгновенно узнаваемым, чтобы направлять пользователя к ключевым взаимодействиям.
Первичный-Dim
Первичный-Dim
На-основном
Роли Dim обычно используются для элементов, которые должны визуально отличаться от основного действия, но не требуют немедленного внимания или взаимодействия пользователя.
Первичный контейнер
Первичный контейнер
На первичном контейнере
Применяйте Primary Container для фоновых элементов, таких как карточки или модальные окна, чтобы выделить разделы или выбранные состояния. Это помогает привлечь внимание к важному контенту или текущим действиям в пользовательском интерфейсе.
Второстепенные роли
Вторичные роли используются для ключевых компонентов в пользовательском интерфейсе, которые не так важны, как основная роль, но все равно должны выделяться. Первичные и вторичные роли могут использоваться вместе в макетах для создания дифференциации и фокусировки.
Вторичный
Вторичный
На-Вторичном
Используйте роль Secondary для поддержки действий в областях с плотным пользовательским интерфейсом, таких как вторичные кнопки или дополнительные действия. Она поддерживает видимость, не затмевая основные элементы в сложных макетах.
Вторичный-Dim
Вторичный-Dim
Вторичный
Роль Secondary-Dim обеспечивает приглушенный контраст для пассивных элементов в плотных областях. Она дополняет вторичный цвет, добавляя тонкую глубину, сохраняя чистоту пользовательского интерфейса и помогая пользователям ориентироваться.
Вторичный контейнер
Вторичный контейнер
На вторичном контейнере
Применяйте Secondary-Container для организации вторичных элементов в плотных макетах. Он создает структуру и разделение, гарантируя, что вторичный контент будет различимым, но не доминирующим.
Третичные роли
Третичные роли используются для контрастных акцентов, чтобы сбалансировать основные и вторичные цвета или привлечь повышенное внимание к элементу, такому как поле ввода. Третичные роли также могут помочь указать, когда содержимое меняется или должно выделяться, например, когда цель достигнута.
Третичный
Третичный
На-третичный
Третичная роль используется для привлечения внимания к ключевым элементам. Третичные роли особенно эффективны для компонентов, которые должны выделяться, таких как значки, наклейки или элементы специального действия.
Третичный-Dim
Третичный-Dim
Третичный
Используйте роль «Третичная яркость» для кнопок или действий, которые связаны с третичными действиями, но не требуют немедленного фокуса.
Третичный контейнер
Третичный контейнер
На-третичном-контейнере
Применяйте Tertiary-Container для фонов, которые группируют контент, связанный с третичным, например, коллекции значков или наклеек. Он подчеркивает третичные элементы, сохраняя при этом баланс и структуру в пользовательском интерфейсе.
Семантические роли
Error-Red используется для обозначения критических проблем, таких как ошибка, удаление и все, что связано с чрезвычайной ситуацией. Он предназначен для немедленного привлечения внимания к проблемам или предупреждениям, гарантируя пользователям возможность быстро определить области, требующие корректирующих действий. Тон Error-Red должен сохранять достаточный контраст с фоном, чтобы соответствовать стандартам доступности, гарантируя, что он будет четко виден и отличим от других цветов статуса, таких как предупреждения или сообщения об успешном выполнении.
Ошибка
Ошибка
On-Error
Семантический, но слегка окрашенный в тему красный, который обозначает действия по удалению, удалению, закрытию или отклонению, такие как «Проведите для показа». Добавлен в качестве альтернативы контейнеру, которая немного менее тревожна и срочна, чем цвет с тусклым от ошибок цветом.
Ошибка-Dim
Ошибка-Dim
On-Error
Семантический, но слегка тематически окрашенный красный цвет, который указывает на высокоприоритетные ошибки или экстренные действия, такие как предупреждения о безопасности, сбойные диалоговые окна или кнопки остановки.
Ошибка-Контейнер
Ошибка-Контейнер
On-Error-Container
Менее заметный цвет контейнера для компонентов, использующих состояние ошибки. Может также указывать на активное состояние ошибки, которое кажется менее интерактивным, чем заполненное состояние, например, активная кнопка или карта экстренного обмена или на неисправном диалоговом окне наложения.
Наземные контейнеры и возвышения
Поверхностные контейнеры играют ключевую роль в определении глубины и высоты в пользовательском интерфейсе, обеспечивая структуру и иерархию посредством цвета, помогая различать компоненты на основе их важности и взаимодействия.
Поверхность-Контейнер-Низкий
Поверхность-Контейнер-Низкий
На поверхности
Вариант на поверхности
Отлично подходит для расширенного контейнера, который должен располагаться ниже Surface-Container, например, расширенная карточка в Notification. Также может использоваться для неинтерактивных карточек, где содержимое все еще выигрывает от сдерживания.
Поверхность-Контейнер
Поверхность-Контейнер
На поверхности
Вариант на поверхности
Цвет контейнера по умолчанию для большинства элементов. Он обеспечивает нейтральный, умеренный подъем, что делает его подходящим для общих компонентов пользовательского интерфейса.
Поверхность-Контейнер-Высокий
Поверхность-Контейнер-Высокий
На поверхности
Вариант на поверхности
Идеально подходит для компонентов с высоким акцентом, которые должны располагаться поверх или в сочетании с Surface-Container. Этот цвет помогает сфокусироваться и создать иерархию в критических областях пользовательского интерфейса.
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-29 UTC."],[],[],null,["# Color roles and tokens\n\nThe Wear Material 3 Expressive color system employs three accent layers\n(primary, secondary, tertiary) for key components and two neutral surface\nlayers. Each role offers a range of values with consistent contrast, enabling\nexpressive yet accessible color combinations for a unified experience across any\ntheme.\nAn example of a color theme with roles.\n\nWhat are color roles?\n---------------------\n\nColor roles are like the \"numbers\" in a paint-by-number canvas. They're the\nconnective tissue between elements of the UI and what color goes where.\n\n- **Color roles are mapped to Material components:** You'll use these color roles whether you're using the static baseline scheme or dynamic color. If your product contains custom components, they'll need to be properly mapped to this set of color roles.\n- **Color roles support accessibility:** The color system is built on more accessible color pairings. These color pairs provide a minimum of 3:1 color contrast.\n- **Color roles are tokenized:** Roles are implemented in design and code through tokens. A design token represents a small, reusable design decision that's part of a design system's visual style.\n\nEssential terms\n---------------\n\nHere are key terms you'll see in the names of color roles:\n\n- **Surface:** A role used for backgrounds and large, low-emphasis areas of the screen.\n- **Primary, Secondary, Tertiary:** Accent color roles used to emphasize or de-emphasize foreground elements.\n- **Container:** Roles used as a fill color for foreground elements like buttons. They shouldn't be used for text or icons.\n- **On:** Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.\n- **Variant:** Roles ending with this term offer a lower-emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.\n\nPrimary roles\n-------------\n\n\nPrimary roles are used for key components across the UI, such as the Edge\nHugging buttons, prominent buttons, active states, and icons on the tonal button\nstyles. \n\n\u003cbr /\u003e\n\n\n**Primary**\n\n1. Primary\n2. On-Primary\n\nUse the Primary role for the most important actions in the UI, like primary\nbuttons or calls to action. This color should stand out and be instantly\nrecognizable to guide the user toward key interactions. \n\n**Primary-Dim**\n\n1. Primary-Dim\n2. On-Primary\n\nDim roles are typically used for elements that need to be visually distinct from\nthe primary action but don't require immediate user attention or interaction. \n\n**Primary-Container**\n\n1. Primary-Container\n2. On-Primary-Container\n\nApply Primary Container for background elements like cards or modals to\nhighlight sections or selected states. It helps draw attention to important\ncontent or ongoing activities within the UI.\n\n\u003cbr /\u003e\n\nSecondary roles\n---------------\n\n\nSecondary roles are used for key components across the UI, which are not as\nimportant as the primary role, but still need to stand out. Primary and\nsecondary can be used together in layouts to create differentiation and focus. \n\n\u003cbr /\u003e\n\n\n**Secondary**\n\n1. Secondary\n2. On-Secondary\n\nUse the Secondary role for supporting actions in areas with dense UI, such as\nsecondary buttons or complementary actions. It maintains visibility without\novershadowing primary elements in complex layouts. \n\n**Secondary-Dim**\n\n1. Secondary-Dim\n2. Secondary\n\nThe Secondary-Dim role offers a muted contrast for passive elements in dense\nareas. It complements the secondary color while adding subtle depth, keeping the\nUI clean and helping users navigate. \n\n**Secondary-Container**\n\n1. Secondary-Container\n2. On-Secondary-Container\n\nApply Secondary-Container for organizing secondary elements in dense layouts. It\ncreates structure and separation, ensuring secondary content is distinguishable\nbut not dominant.\n\n\u003cbr /\u003e\n\nTertiary roles\n--------------\n\n\nTertiary roles are used for contrasting accents to balance primary and secondary\ncolors or bring heightened attention to an element such as an input field.\nTertiary roles can also help indicate when content changes or should stand out,\nsuch as a goal being reached. \n\n\u003cbr /\u003e\n\n\n**Tertiary**\n\n1. Tertiary\n2. On-Tertiary\n\nThe Tertiary role is used for drawing attention to key elements. Tertiary roles\nare particularly effective for components that need to stand out, such as\nbadges, stickers, or special action elements. \n\n**Tertiary-Dim**\n\n1. Tertiary-Dim\n2. Tertiary\n\nUse the Tertiary Dim role for buttons or actions that are related to tertiary\nactions yet don't require immediate focus. \n\n**Tertiary-Container**\n\n1. Tertiary-Container\n2. On-Tertiary-Container\n\nApply Tertiary-Container for backgrounds that group tertiary-related content,\nlike collections of badges or stickers. It emphasizes tertiary elements while\nmaintaining balance and structure in the UI.\n\n\u003cbr /\u003e\n\nSemantic roles\n--------------\n\n\nError-Red is used to indicate critical issues as error, delete, and anything\nrelated to emergency. It is designed to draw immediate attention to problems or\nwarnings, ensuring users can quickly identify areas that need corrective action.\nThe tone of Error-Red should maintain sufficient contrast against backgrounds to\nmeet accessibility standards, ensuring it is clearly visible and is\ndistinguishable from other status colors like warnings or success messages. \n\n\u003cbr /\u003e\n\n\n**Error**\n\n1. Error\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates remove, delete, close\nor dismiss actions, such as Swipe to Reveal. Added as a container alternative\nthat is slightly less alarming and urgent than the error-dim color. \n\n**Error-Dim**\n\n1. Error-Dim\n2. On-Error\n\nA semantic, yet slightly theme-tinted red, which indicates high priority errors\nor emergency actions, such as safety alerts, failed dialog overlays or stop\nbuttons. \n\n**Error-Container**\n\n1. Error-Container\n2. On-Error-Container\n\nLess prominent container color, for components using the error state. Can also\nindicate an active error state which feels less interactive than a filled state,\nsuch as an active emergency sharing button or card, or on a failed overlay\ndialog.\n\n\u003cbr /\u003e\n\nSurface containers and elevation\n--------------------------------\n\n\nSurface containers are key in defining depth and elevation within the UI,\nproviding structure and hierarchy through color, helping to differentiate\ncomponents based on their importance and interaction. \n\n\u003cbr /\u003e\n\n\n**Surface-Container-Low**\n\n1. Surface-Container-Low\n2. On-Surface\n3. On-Surface-Variant\n\nGreat for an expanded container that needs to sit below Surface-Container, such\nas an expanded card in the Notification. Can also be used for non-interactive\ncards, where content still benefits from containment. \n\n**Surface-Container**\n\n1. Surface-Container\n2. On-Surface\n3. On-Surface-Variant\n\nThe default container color for most elements. It provides a neutral, moderate\nelevation, making it suitable for general UI components. \n\n**Surface-Container-High**\n\n1. Surface-Container-High\n2. On-Surface\n3. On-Surface-Variant\n\nIdeal for high-emphasis components that need to sit on top of, or in combination\nwith Surface-Container. This color helps bring focus and hierarchy to critical\nareas in the UI.\n\n\u003cbr /\u003e"]]
