Цветовые роли

Один ключевой цвет становится тринадцатью тонами

Тональная палитра состоит из тринадцати тонов, включая белый и черный. Значение тона 100 эквивалентно идее максимального света и приводит к белому цвету. Каждое значение тона от 0 до 100 выражает количество света, присутствующего в цвете.

Тональное значение каждого цвета выражается числом, связанным с этой ролью, например. primary40 — цвет primary со значением тона 40.

В то время как ключевые цвета являются основой для тональных палитр, в UI используется только набор из тринадцати цветов из каждой тональной палитры. Схема - это группа тонов, назначенных определенным ролям, которые сопоставляются компонентам.

Роли в схеме

Каждый ключевой цвет акцента (primary, secondary и tertiary) представлен в виде группы из 4 совместимых цветов с разными тонами, которые можно применять для разного акцента и визуальной выразительности, а также сочетать для визуального контраста.

Когда создается цветовая схема, тональные палитры также включают сопоставления для темной темы. Приложения получают светлые и темные тона с помощью единой сгенерированной схемы.

Из пяти ключевых цветов автоматически назначаются роли, соответствующие компонентам светлой темы

Из пяти ключевых цветов автоматически назначаются роли, соответствующие компонентам темной темы

Акцентные цвета

Primary

Primary используются для ключевых компонентов пользовательского интерфейса, таких как FAB, выступающие кнопки, активные состояния, а также оттенок приподнятых поверхностей.

1. On-primary
2. Primary

3. On-primary container
4. Primary container

Secondary

Secondary цвета используются для менее заметных компонентов пользовательского интерфейса, таких как chips, расширяя при этом возможности цветового выражения.

1. Иконка: on-Secondary container
2. Secondary container

Tertiary

Tertiary цвета используются для контрастных акцентов, которые могут быть использованы для баланса primary и secondary цветов или привлечения повышенного внимания к элементу, такому как input field.

Роль tertiary цвета оставлена на ваше усмотрение - можете использовать его по своему усмотрению, и предназначена для поддержки более широкого цветового выражения в продуктах.

1. On-tertiary container
2. Tertiary container