Какие форматы изображений поддерживаются?

Вы можете загрузить файлы PNG, JPEG, WebP, GIF и AVIF размером до 10 МБ.

Как работает генерация шкалы оттенков?

Инструмент сохраняет исходный тон и насыщенность цвета, изменяя только светлоту для создания гармоничного ряда от светлого к темному.

Что такое семантический стиль имён?

Это автоматическое присвоение цветам ролей вроде primary, accent и secondary вместо простых порядковых номеров.

Можно ли получить токены сразу во всех форматах?

Да, выберите вариант «Все форматы» в настройках вывода, чтобы сгенерировать CSS, SCSS, Tailwind JS и JSON одновременно.

Как алгоритм k-средних выбирает цвета?

Он группирует пиксели изображения по схожести цветов и находит центры этих групп, представляющие наиболее доминирующие оттенки.

Elysia Tools

Навигация

Design

Палитра из изображения в design-токены

Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков

Детали

С чем помогает этот инструмент

Загрузите изображение, и инструмент:

Уменьшит его и выполнит k-средних на пикселях, чтобы найти доминирующие цвета (3 / 5 / 8 / 12 на выбор).
Назовёт каждый цвет (числами color1… или семантически primary/accent…) и покажет долю пикселей.
Опционально построит шкалу оттенков (Tailwind 50–950 или Material 100–900), сохраняя тон и насыщенность и варьируя светлоту.
Сериализует результат в CSS-переменные, SCSS, конфиг Tailwind, JSON-токены или всё сразу.

Выберите префикс и стиль имён, скопируйте готовый код — и ваша дизайн-система сразу получит палитру.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

1 примеров

Извлечь палитру из 5 цветов со шкалой Tailwind

Загрузите изображение, получите 5 доминирующих цветов, шкалу 50–950 и CSS-переменные с префиксом brand.

<div>5 swatches with population %, a base+scale preview row each, and a :root{} CSS-variables block ready to paste.</div>

Ввод

Заполните нужные поля и запустите инструмент.

6 параметров

ФайлыЗагрузите исходные файлы для этого сценария.1

Исходное изображениеfileОбязательно

Максимальный размер одного файла: 10 MBПоддерживаемые типы: image/png, image/jpeg, image/webp, image/gif, image/avif

СодержимоеВставьте или введите основные значения.1

Префикс токенаtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.4

Размер палитрыselectНеобязательноШкала оттенковselectНеобязательноФормат выводаselectНеобязательноСтиль имёнselectНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Палитра из изображения в design-токены

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

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

Как это работает

Сценарии использования

Примеры

1. Создание CSS-переменных для корпоративного сайта

2. Генерация палитры Tailwind из логотипа

FAQ

Примеры Обработки Изображений Web Python

Примеры Обработки Изображений Web TypeScript

Примеры Обработки Изображений Android Java

Примеры Обработки Изображений Android Kotlin

Генератор Data URI

Массовое преобразование изображений

Пакетная Обрезка Изображений

Изменитель Размера Изображений

Инструменты конвертации форматов изображений и анимированного экспорта

Инструменты JSON-обмена и перевода форматов

Инструменты для проверки, diff и преобразования JSON

Инструменты для очистки, оформления и пакетной подготовки изображений