Генератор цветовых палитр Material Design
Создавайте красивые цветовые палитры по рекомендациям Google Material Design. Выберите основной и акцентный цвет, чтобы сгенерировать полную тему.
Генератор палитр
Готовая палитра
Полная цветовая палитра Material Design
Просмотрите полный набор цветов Material Design. Нажмите на любой цвет, чтобы скопировать его hex-код.
Красный
Розовый
Фиолетовый
Синий
Зелёный
Оранжевый
Бирюзовый
Янтарный
Советы по использованию
- Используйте оттенок 500 в качестве основного цвета
- Используйте оттенок 700 для более тёмных вариантов (например, для панелей приложений)
- Используйте акцентные цвета (A200, A400) для плавающих кнопок действий и выделений
- Обеспечьте достаточный контраст для доступности
Профессиональный генератор цветов Material Design
Доступ к полной цветовой системе Google Material Design 3 с палитрами Material You, официальными цветовыми токенами и профессиональными опциями экспорта для современной разработки интерфейсов и Android-приложений.
Почему стоит выбрать наш генератор Material Design?
Наш комплексный инструмент даёт доступ к полной цветовой системе Material Design 3 с динамическими темами Material You, официальными цветовыми токенами Google и профессиональными форматами экспорта.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Полная система Material Design 3
Доступ к полной цветовой системе Material Design 3, включая основные, вторичные и третичные цвета, варианты поверхностей и полные тональные палитры с семантическими цветовыми ролями.
Динамические темы Material You
Создавайте цветовые схемы Material You на основе исходного цвета с автоматическими светлой и тёмной темами и персонализированным извлечением цвета для современных Android-приложений.
Готовые для разработчиков варианты экспорта
Экспорт в CSS-переменные, SCSS-переменные, JSON-токены, XML-ресурсы для Android, токены Figma и данные тем Flutter с корректными соглашениями об именовании.
Идеально подходит для:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
Как это работает:
Выберите цветовую систему
Выберите классические цвета Material Design 3 или создайте палитры Material You на основе исходного цвета.
Настройка и предпросмотр
Настройте тональные значения, посмотрите светлую и тёмную темы и оцените, как цвета выглядят в компонентах Material Design.
Экспорт и внедрение
Скачайте цветовые токены в нужном формате и внедрите их прямо в процесс разработки.
Часто задаваемые вопросы
Material Design 3 — это последняя система дизайна от Google с улучшенными цветовыми ролями и семантическими токенами. Material You — это слой персонализации, который создаёт собственные цветовые схемы на основе обоев пользователя или исходного цвета, формируя динамические темы, адаптированные под личные предпочтения при сохранении принципов MD3.
Введите цвет вашего бренда или предпочитаемый оттенок в качестве исходного цвета. Наш алгоритм создаёт полную тональную палитру с семействами основных, вторичных, третичных, нейтральных и вариативных нейтральных цветов — по 13 тональных вариаций от 0 (чёрный) до 100 (белый) — в соответствии со спецификациями Material You от Google.
Экспорт в CSS-переменные, SCSS/Sass-переменные, JSON-токены дизайна, XML-ресурсы для Android, объекты JavaScript/TypeScript, токены дизайна Figma, темы ColorScheme для Flutter и цветовые ресурсы Swift для iOS. Все варианты экспорта включают корректные семантические имена.
Да! Цветовая система Material Design 3 изначально разработана с учётом доступности. Система тональных палитр обеспечивает нужный контраст между цветами поверхностей и текста на них. Наш инструмент показывает уровень соответствия WCAG и автоматически подбирает доступные сочетания цветов.
Конечно! Цвета Material Design имеют открытую лицензию и могут использоваться в любом проекте. Хотя система создавалась для продуктов Google, её цветовая наука и принципы доступности отлично подходят для любого современного интерфейса — веб, мобильных или десктопных приложений.
Material Design 3 использует семантические цветовые роли, которые автоматически сопоставляются с нужными тональными значениями для светлой и тёмной тем. Например, роль primary использует тон 40 в светлой теме и тон 80 в тёмной. Наш генератор создаёт оба варианта темы с сохранением нужного контраста и доступности.