Справочник цветов Material Design
Интерактивный справочник всех цветовых токенов Material Design 3 (Material You): 37 цветовых ролей со значениями светлой и тёмной темы, 6 тональных палитр по 13 тональных ступеней и имена CSS-переменных для каждого токена. Нажмите на любой образец или значение HEX, чтобы скопировать его. Без регистрации.
Searchable reference of all Material Design 3 (Material You) color tokens - dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime - these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
Почему стоит использовать наш справочник цветов Material Design?
- Полный справочник токенов Material Design 3: все цветовые роли Material Design 3 — primary, secondary, tertiary, error, surface, background, outline, shadow и scrim — со значениями светлой и тёмной темы. Включает все 6 тональных палитр по 13 тональных ступеней.
- Мгновенный поиск и фильтр по ролям: ищите по имени токена, имени CSS-переменной, значению HEX или описанию. Фильтруйте по цветовой роли, чтобы сосредоточиться на нужных токенах. Результаты обновляются мгновенно при каждом нажатии клавиши.
- Значения светлой и тёмной темы: переключайтесь между значениями светлой и тёмной темы одним кликом. Каждая цветовая роль показывает правильное значение токена для обеих тем — необходимо для создания адаптивных интерфейсов Material You.
- 100 % бесплатно — без регистрации: полностью бесплатно, без учётной записи, премиум-уровня, ограничений использования и рекламы, блокирующей интерфейс. Обращайтесь к цветам Material Design 3 сколько угодно раз.
Типичные случаи использования справочника цветов Material Design
- Разработка приложений Android: разработчики Android используют справочник цветов Material Design, чтобы реализовать правильные цветовые роли в Jetpack Compose и XML-разметке. Справочник показывает значения светлой и тёмной темы для каждого токена, избавляя от необходимости искать их в официальной документации.
- Разработка на Flutter и кроссплатформенная разработка: разработчики Flutter используют справочник цветов Material Design для настройки ColorScheme в ThemeData. Значения тональной палитры напрямую соответствуют цветовой системе Material 3 во Flutter, что упрощает реализацию фирменных цветов.
- Веб-реализация Material Design: веб-разработчики, внедряющие Material Design 3 с Material Web Components, используют имена CSS-переменных из этого справочника, чтобы переопределить стандартные токены темы и применить фирменные цвета.
- Настройка дизайн-системы в Figma: дизайнеры, настраивающие Material Design 3 в Figma, используют справочник цветов для заполнения цветовых стилей и переменных. Значения тональной палитры дают полный набор образцов, необходимый для дизайн-системы Material You.
- Динамический цвет Material You: разработчики, внедряющие динамический цвет Material You, используют базовые значения токенов в качестве запасного варианта, когда сгенерированная из обоев пользователя палитра недоступна. Этот справочник предоставляет все базовые значения для светлой и тёмной темы.
- Проверка доступности и контраста: инженеры по доступности используют справочник цветов Material Design, чтобы проверить, что пары цветовых ролей (например, Primary + On Primary) соответствуют требованиям контраста WCAG. Роли on-color специально разработаны для обеспечения читаемого контраста.
Что такое Material Design 3 (Material You)?
Material Design 3 (также называемый Material You) — новейшая система дизайна Google, представленная в 2021 году с Android 12. Её цветовая система построена на динамическом цвете — способности генерировать полную цветовую палитру из обоев пользователя во время выполнения. Система определяет набор цветовых ролей (семантических токенов, таких как «Primary», «On Primary», «Surface»), которые сопоставляются с конкретными тонами тональной палитры. Такое разделение ролей и значений позволяет всему интерфейсу адаптироваться к любому бренду или созданному пользователем цвету, сохраняя согласованный контраст и доступность. Наш справочник цветов Material Design предоставляет все базовые значения токенов для светлой и тёмной темы.
Как работает цветовая система Material Design 3
- Тональные палитры: Material Design 3 генерирует шесть тональных палитр из исходного цвета — Primary, Secondary, Tertiary, Error, Neutral и Neutral Variant. Каждая палитра содержит 13 тонов от 0 (чёрный) до 100 (белый), обеспечивая полный диапазон значений светлоты.
- Цветовые роли: цветовые роли — это семантические токены, сопоставленные с конкретными тонами тональных палитр. Например, «Primary» соответствует тону 40 в светлой теме и тону 80 в тёмной. «On Primary» соответствует тону 100 в светлой и тону 20 в тёмной.
- Динамический цвет: на Android 12+ Material You генерирует пользовательские тональные палитры из обоев пользователя. Цветовые роли затем сопоставляются с теми же позициями тонов в пользовательской палитре, создавая полностью персонализированный интерфейс. Базовые значения на этой странице — запасной вариант, когда динамический цвет недоступен.
Ключевые группы цветовых ролей
- Primary / On Primary / Primary Container: основной фирменный цвет и его варианты. Primary используется для ключевых действий и элементов с высоким акцентом. Primary Container используется для заполненных тональных кнопок и выбранных состояний.
- Secondary и Tertiary: вспомогательные цвета для менее заметных компонентов и контрастных акцентов. Secondary используется для чипов и альтернативных действий; Tertiary даёт третий акцент для визуального баланса.
- Surface и Background: нейтральные цвета для фонов карточек, листов, диалогов и фона приложения. Material Design 3 вводит несколько уровней контейнера поверхности (lowest, low, default, high, highest) для тонирования на основе высоты.
- Outline и Outline Variant: цвета границ для текстовых полей, разделителей и колец фокуса. Outline используется для заметных границ; Outline Variant — для тонких декоративных разделителей.
Использование CSS-переменных
Material Web Components (официальная веб-реализация Material Design 3) использует пользовательские CSS-свойства с префиксом --md-sys-color- для всех цветовых токенов. Вы можете переопределить любой токен, задав CSS-переменную в своей таблице стилей: :root { --md-sys-color-primary: #ваш-цвет; }. Этот справочник предоставляет точное имя CSS-переменной для каждого токена, что упрощает копирование и вставку в вашу реализацию.
Часто задаваемые вопросы
Material Design 3 — новейшая система дизайна Google с динамическим цветом, который генерирует палитры из обоев пользователя. Этот справочник предоставляет все базовые значения токенов для светлой и тёмной темы.
Тональная палитра — это 13 цветовых тонов (0–100) из исходного цвета. Цветовая роль — это семантический токен, сопоставленный с конкретным тоном, например «Primary» соответствует тону 40 в светлой и тону 80 в тёмной теме.
Material Web Components использует префикс --md-sys-color-. Например, Primary — это --md-sys-color-primary. Этот справочник показывает точное имя CSS-переменной для каждого токена.
Используйте ColorScheme.fromSeed() или укажите каждую роль вручную в ColorScheme(). Преобразуйте HEX в Flutter Color через Color(0xFF + hex без #).
Используйте dynamicColorScheme() для Material You или создайте пользовательский ColorScheme со значениями токенов. Преобразуйте HEX в Compose Color через Color(0xFF6750A4).
Каждая роль использует разные значения тона в зависимости от темы: Primary — тон 40 в светлой и тон 80 в тёмной. Переключайтесь между темами в этом справочнике, чтобы увидеть правильные значения.
Динамический цвет генерирует пользовательскую палитру из обоев пользователя на Android 12 и выше. Базовые значения здесь — запасной вариант, когда динамический цвет недоступен.
Да. Это официальные базовые значения палитры Material Design 3 с m3.material.io, использующие стандартный фиолетовый исходный цвет (#6750A4).
Да. 100 % бесплатно, без регистрации, без премиум-уровня, без ограничений использования и без рекламы, блокирующей интерфейс.