7 мин чтения
2026-02-06
Material Design — дизайн-система Google, предоставляющая палитру из 19 основных цветов с 14 оттенками каждый (от 50 до 900 + акцентные A100-A700).
Каждый цвет имеет шкалу оттенков:
| Оттенок | Назначение |
|---|---|
| 50-100 | Светлые фоны |
| 200-300 | Второстепенные элементы |
| 500 | Основной цвет |
| 700 | Status bar (Android) |
| 900 | Максимально тёмный |
| A100-A700 | Акцентные варианты |
Используется для toolbar, крупных блоков и основного акцента. Выберите оттенок 500.
Для кнопок действия (FAB), переключателей, ссылок. Обычно акцентный оттенок A200.
Светлые оттенки (50-100) для фона карточек и страниц.
Новая версия системы (Material You) автоматически генерирует палитру из одного цвета, создавая тональные группы и поверхности.
Смотрите также: Tailwind CSS цвета, Цветовое колесо, Проверка контраста