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

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

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

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

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

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

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

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

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

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

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

Запуск

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

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

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

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

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Обязательно

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

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

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

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

Результат

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

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

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

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

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Обязательно

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

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

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

Результат

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

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

Примеры

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

Фронтенд-разработчик

Контекст

Разработчику передали скриншот главного экрана нового сайта и попросили перенести цветовую схему в CSS-код проекта.

Проблема

Необходимо вручную пипеткой определять цвета, придумывать им названия и прописывать переменные в CSS.

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

Загрузите скриншот, выберите размер палитры '5 цветов', формат вывода 'CSS-переменные', префикс 'brand' и семантический стиль имён.

paletteSize: 5, scale: none, format: css, prefix: brand, naming: semantic

Результат

Получен готовый блок :root с пятью CSS-переменными (например, --brand-primary, --brand-accent), готовый к копированию в файл стилей.

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

UI/UX дизайнер

Контекст

Для нового проекта на Tailwind CSS нужно настроить тему, используя цвета из логотипа компании.

Проблема

Требуется не просто найти базовые цвета, но и построить для каждого из них полную шкалу оттенков от 50 до 950.

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

Загрузите файл логотипа, выберите шкалу оттенков '50–950 (стиль Tailwind)', формат вывода 'Конфиг Tailwind (JS)' и числовой стиль имён.

paletteSize: 3, scale: tailwind, format: tailwind, prefix: theme, naming: numeric

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

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

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

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

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

Ввод

Результат

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

Ввод

Результат

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

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

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

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

Обзор

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

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

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

Примеры

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

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

FAQ

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

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

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

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

Генератор Data URI

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

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

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

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

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

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

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