Что такое Палитра Material Design?

Палитра цветов Material Design предоставляет полную цветовую палитру с основными цветами и всеми оттенками (от 50 до 900). Нажмите на образец, чтобы скопировать значение в HEX, RGB или HSL, и проверьте доступность встроенным инструментом контраста WCAG.

В палитре 19 основных оттенков (от Red до Brown), у каждого есть градации 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, а для цветов, где это предусмотрено Google, ещё и акценты A100, A200, A400, A700. Каждая плашка показывает точный HEX, а панель выбранных цветов позволяет собрать палитру проекта и скопировать или скачать её списком.

Как использовать

1. Просмотрите сетку основных цветов Material Design — Red, Pink, Purple, Deep Purple, Indigo, Blue и другие.
2. Нажмите на основной цвет, чтобы развернуть варианты оттенков от самого светлого (50) до самого тёмного (900), включая акцентные оттенки (A100–A700).
3. Кликните по любому оттенку, чтобы скопировать его в выбранном формате (HEX, RGB или HSL), добавьте оттенки в панель «Выбранные цвета» и выгрузите палитру в CSS, SCSS, конфиг Tailwind или JSON для своего проекта.

Когда использовать

• Выбрать основной цвет, более светлый для контейнера и более тёмный для наведения из одного оттенка.
• Согласовать интерфейс Android или Flutter с официальной палитрой Google, не подбирая HEX вручную.
• Собрать согласованную палитру для презентации или маркетингового макета.

Результат

Вы создаёте дашборд и вам нужен точный цвет Material Design «Indigo 500» (#3F51B5) для основной кнопки и «Indigo 50» (#E8EAF6) для фона при наведении.

Частые вопросы

Чем основные градации отличаются от акцентных (A)?

Градации 50–900 — это вариации яркости одного оттенка, подходящие для фона, поверхностей и текста. Акценты A100–A700 имеют более высокую насыщенность, Google рекомендует использовать их для кнопок, бейджей и других элементов действия.

Почему у некоторых цветов нет акцентов?

Brown и Grey изначально малонасыщенные, поэтому Google не публиковал для них варианты A. Инструмент следует оригинальной спецификации и не придумывает значений, которых в системе никогда не было.

Какой градации придерживаться для основного текста?

Material рекомендует Grey 900 на светлом фоне и Grey 50 или белый на тёмном. Средние градации (500–600) подходят для вспомогательного текста или иконок, которым нужен меньший контраст.

Это те же цвета, что в Material 3 (Material You)?

Нет. Эта палитра — оригинальная система Material Design, опубликованная Google в 2014 году. В Material 3 используется отдельный алгоритм, который строит динамические тональные палитры из одного исходного цвета.

Как проверить контрастность между двумя градациями?

Добавьте оба оттенка в панель «Выбранные цвета» и прокрутите до проверки контраста. Назначьте один передним планом, другой — фоном, и панель сразу покажет коэффициент WCAG со значками «Пройдено/Не пройдено» для уровней AA и AAA на обычном и крупном тексте.

Похожие инструменты