Приватный инструмент изображения и палитры
Превратите мультфильм, иллюстрацию, снимок экрана или референс в компактную рабочую палитру. Toon Tone находит хорошо различимые главные цвета, показывает HEX, RGB и HSB, сохраняет закреплённые образцы при повторной генерации и предлагает короткую тренировку памяти после извлечения.
Обновлено 21 июля 2026 года
генератор палитры цветов мультфильма
Генератор локально читает изображение в браузере, объединяет близкие цвета пикселей, ранжирует группы по видимой площади и выбирает пять или восемь образцов, которые заметно отличаются друг от друга. Для каждого результата доступны значения HEX, RGB и HSB. Нужный цвет можно закрепить, а затем пересчитать только свободные позиции, скачать подписанный PNG, скопировать переменные CSS или выбрать образец для пятисекундного теста цветовой памяти. Это практическое визуальное резюме, а не утверждение об официальной палитре персонажа, студии или бренда.
Локальное извлечение главных цветов
Загрузите мультфильм, иллюстрацию, снимок экрана или фото. Браузер предложит пять или восемь разных цветов; закрепите нужные и обновите только остальные.
Обработка на устройстве без отправки изображения
Созданная палитра
Доля — оценка областей выборки. Проверяйте также роль каждого цвета на исходнике.
Загрузите изображение, чтобы создать палитру.
Пять секунд цветовой памяти
Выберите тренировку на карточке, смотрите пять секунд, восстановите HSB и узнайте свой результат Toon Tone.
Выберите тренировку на карточке созданного цвета, чтобы начать.
Загружается локальная палитра примера.
Обработка на устройстве без отправки изображения
Декодирование, уменьшение, группировка цветов, создание палитры и экспорт PNG выполняются API браузера на вашем устройстве. На странице нет серверной загрузки изображений, библиотеки аккаунта или сохранения в облаке. При обновлении или закрытии вкладки рабочее изображение и извлечённые цвета удаляются. Эта граница конфиденциальности относится к обработке внутри инструмента; безопасность устройства, расширений браузера и скачанных файлов по-прежнему зависит от пользователя.
Хороший результат начинается с ясного источника и заканчивается осознанным выбором. Этот процесс сохраняет высокую скорость извлечения, но оставляет окончательное редакторское решение за вами.
Перетащите, выберите или вставьте изображение с читаемыми цветовыми областями. Плоская графика работает особенно хорошо, но поддерживаются также иллюстрации с тенями и снимки экрана. Пример позволяет сразу проверить весь процесс.
Выберите пять цветов для компактного образа или восемь, чтобы добавить вспомогательные тени и акценты. Закрепите образцы, которые нужно сохранить, и пересчитайте только свободные позиции.
Скопируйте один цвет, полный список или переменные CSS и скачайте подписанный PNG. Кнопка тренировки показывает цвет пять секунд, скрывает его и предлагает восстановить значения HSB.
Вместо генеративного ИИ используется детерминированное визуальное резюме, которое легко повторить. Размер обработки уменьшается, близкие пиксели объединяются, а между выбранными цветами сохраняется воспринимаемая дистанция.
| Этап | Что происходит | Зачем это нужно |
|---|---|---|
| Локальная выборка | Браузер читает уменьшенный холст, не отправляя исходный файл. | Большие изображения обрабатываются быстро и приватно с сохранением общего распределения цветов. |
| Группировка цветов | Близкие пиксели RGB попадают в небольшие группы и усредняются в кандидаты. | Текстура и сжатие не заполняют палитру почти одинаковыми кодами. |
| Различимый выбор | Частые кандидаты ранжируются и проверяются по воспринимаемой разнице цветов. | Пять или восемь образцов отражают разные роли, а не только сырую частоту. |
Созданная палитра приносит больше пользы, когда понятны исходник, интересующая область и следующая задача. Одни и те же образцы можно применять по-разному.
Сделайте цветовое резюме кадра, сравните роли тёплых и холодных тонов, оцените вес персонажа, предметов и фона. Считайте результат учебным ориентиром, а не официальным производственным ключом.
Скопируйте HEX или переменные CSS для чернового интерфейса, презентации или мудборда. До использования в продукте проверьте контраст и официальные источники бренда.
Посмотрите на цвет пять секунд, скройте его и восстановите тон, насыщенность и яркость по памяти. Статичный список кодов превращается в повторяемое визуальное упражнение.
Мультяшная графика часто кажется простой, потому что зритель быстро распознаёт крупные формы и плоские заливки. Однако полезная палитра всё равно должна разделять цвета, выполняющие разные функции. Большой светлый фон может занимать большинство пикселей и почти не определять персонажа. Чёрный контур может встречаться часто, но оказаться менее полезным, чем небольшой акцент костюма. Тени, блики, сглаженные края, текстура, субтитры и сжатие создают десятки кодов вокруг области, которую глаз воспринимает как единый цвет. Поэтому простой рейтинг частоты переоценивает фон и повторяет почти одинаковые оттенки. Toon Tone сначала объединяет близкие значения, а затем проверяет, отличается ли новый кандидат от уже выбранных на уровне восприятия. Палитра остаётся компактной, но сохраняет несколько визуальных ролей.
Пять цветов подходят для быстрого резюме идентичности: доминирующее поле, цвет главного объекта, вторичный цвет, акцент и светлая или тёмная поддержка. Восемь дают место второму акценту, группе теней или дополнительной роли фона. Ни один размер не является универсально правильным. Для очень плоской иконки хватит меньшего числа, а насыщенный светом анимационный кадр потеряет детали даже при восьми. Используйте результат как отправную точку, сравнивайте его рядом с исходником и закрепляйте только те образцы, которые отвечают на ваш вопрос. Закрепление намеренно оставляет редакторский выбор человеку: алгоритм предлагает кандидатов, а вы решаете, какие цвета должны остаться в рабочей палитре.
У изображения редко бывает одна объективно полная палитра. Первый проход может выбрать главный фон, два близких цвета объекта, блик и контур. Если фон и блик нужны, но средний образец выглядит лишним, закрепите полезные цвета и запустите генерацию снова. Закреплённые позиции сохраняют точные значения HEX, RGB и HSB, а браузер пересматривает только открытые места. Небольшое изменение группировки и ранжирования способно вывести менее частый акцент, не удаляя уже подтверждённые элементы. Это отличается от полного старта заново: при нём каждый щелчок может убрать именно нужный цвет, а сравнить старый и новый варианты становится сложнее.
Закрепление не доказывает, что цвет точен для любого применения. Оно лишь сохраняет ваше текущее решение в этой вкладке. Если источник содержит освещение, градиенты, полупрозрачные слои или снимок экрана, извлечённый цвет описывает декодированные пиксели, а не исходную краску или официальный дизайн-токен. Для передачи в производство сравните результат с авторизованным источником и запишите, какое изображение, кадр и область использовались. В упражнении на память официальность менее важна, чем постоянство цели: изучите закреплённый образец, скройте его, восстановите HSB и при открытии сравните с тем же сохранённым цветом. Инструмент поддерживает оба сценария, не смешивая силу их утверждений.
HEX и RGB описывают одни и те же экранные каналы красного, зелёного и синего в разных форматах. HEX компактен и удобен для CSS, заметок дизайнера и обмена. RGB явно показывает объём каждого канала от нуля до 255. HSB перестраивает тот же видимый цвет в тон, насыщенность и яркость, что упрощает осмысленную визуальную настройку. Тон определяет семейство цвета, насыщенность показывает его интенсивность, а яркость регулирует положение между тёмным и светлым. Генератор выводит все три формата, поэтому от извлечения можно сразу перейти к коду или упражнению Toon Tone без ручного преобразования в другом сервисе.
Показанная доля — это примерная часть пикселей выборки, отнесённых к группе кандидата, а не научная мера важности. Запоминающийся маленький красный бант может занимать мало места, тогда как однотонный фон покрывает почти весь кадр, но слабо влияет на характер. На процент также воздействуют уменьшение, группировка, прозрачность и правила разделения кандидатов. Читайте долю как свидетельство площади, а функцию оценивайте по исходному изображению. Если два образца похожи по HSB, оставьте тот, который связан со значимой областью, или измерьте точный пиксель отдельной пипеткой изображения. Чтобы понять воспринимаемую близость двух сохранённых цветов, сравните их напрямую в калькуляторе разницы Delta E.
Нет. Выбранное или вставленное изображение декодируется и обобщается в текущей вкладке браузера. Нет API загрузки, хранилища аккаунта или облачной копии. Скачанные PNG и скопированные значения могут оставаться на устройстве или в буфере обмена, пока вы их не удалите.
Генератор автоматически обобщает несколько главных цветов всего изображения. Пипетка точно читает один выбранный пиксель. Используйте генератор для общей картины, а пипетку — для конкретной точки костюма или контура.
Маленький акцент даёт меньше пикселей выборки, чем фон или крупная область объекта. Переключитесь на восемь цветов, закрепите нужные и пересчитайте. Если акцент всё равно отсутствует, не путайте площадь с важностью и измерьте точку пипеткой.
Нет. Это справочные значения, вычисленные браузером из пикселей конкретного файла. Освещение, сжатие, тени, прозрачность, качество и преобразование экрана могут их менять. Для официальной точности используйте руководство правообладателя.
Да. Команда копирования CSS создаёт нумерованные пользовательские свойства с текущими цветами. Перед продакшеном проверьте понятные имена, контраст, цветовое пространство и утверждённые токены.