1
Загрузите изображение
Перетащите, выберите или вставьте изображение. Инструмент локально уменьшит его и извлечёт подходящие для UI кандидаты с квантованием Celebi и ранжированием Score.
DEVELOP.09 MATERIAL COLOR
Палитра Monet
Загрузите изображение и создайте динамическую тему с официальными Material Color Utilities. Сравнивайте варианты, режимы, роли и полные тональные палитры.
IMG
Перетащите изображение сюда
или нажмите для выбора · вставка изображения поддерживается
JPG, PNG, WebP, GIF · локальная обработка Кандидаты исходных цветов Выберите цвет как зерно темы
CFG
Настройки темы
Только локально
Загрузите изображение для создания темы
Мы локально извлечём исходные цвета и построим полную цветовую систему Material для интерфейса.
UI
Предпросмотр темы в интерфейсе
§ 01
Как создать Material-тему из изображения
2
Сравните варианты
Выберите спецификацию Material 3 или Material 3 Expressive и сравните варианты в одном интерфейсе с тем же исходным цветом и уровнем контраста.
3
Проверьте и экспортируйте
Сравните светлую и тёмную темы, изучите семантические роли и полные тональные палитры, затем экспортируйте свойства CSS или JSON.
§ 02
9 стилей динамических цветов Material
Monochrome / Neutral
Ахроматические и малонасыщенные схемы для спокойных интерфейсов с большим объёмом контента.
Tonal Spot / Vibrant
Сбалансированный стандарт Material 3 и более красочная, энергичная интерпретация.
Expressive / Rainbow / Fruit Salad
Сильные повороты оттенка придают характер брендовым и игривым продуктам.
Fidelity / Content
Лучше сохраняют исходный цвет и соотношения температуры, когда палитру должен определять сам контент.
§ 03
Предпросмотр цветов для настоящих интерфейсов
✳
Все варианты используют один и тот же отпечаток из пяти цветов, чтобы сравнивать основные, вторичные, третичные цвета, поверхности и ошибки.
✳
Светлая и тёмная темы показываются рядом для проверки поверхностей, текста, кнопок, контейнеров и навигации.
✳
Доступны все 13 тонов палитр primary, secondary, tertiary, neutral, neutral variant и error.
✳
Используются официальные Google Material Color Utilities, все вычисления выполняются локально.
§ 04
Частые вопросы
Q1Что такое Monet?
Monet — распространённое название динамической цветовой системы Android. Она не просто копирует цвета изображения, а выбирает подходящий исходный цвет и строит полную контрастную тему в цветовом пространстве HCT.
Q2Чем Material 3 отличается от M3 Expressive?
Material 3 использует спецификацию динамических цветов 2021 года и предлагает 9 классических вариантов. M3 Expressive использует спецификацию 2025 года; официальная библиотека добавляет правила для Neutral, Tonal Spot, Vibrant и Expressive с учётом устройства.
Q3Почему варианты так различаются при одном исходном цвете?
Каждый вариант по-разному вращает оттенок и задаёт насыщенность основных, вторичных, третичных и нейтральных палитр. Neutral сдержан, Vibrant повышает насыщенность, Expressive сильно меняет оттенок, а Fidelity сохраняет исходный вид.
Q4Изображение загружается на сервер?
Нет. Декодирование, изменение размера, квантование пикселей, создание темы и экспорт выполняются в браузере. Изображение не покидает устройство.