# Палитра из изображения в design-токены Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков > Каноническая страница: https://elysiatools.com/ru/tools/image-to-design-tokens - **Категория:** Design - **Ключевые слова:** палитра, токены, цвет, css, tailwind ## Обзор Загрузите изображение, и инструмент: 1. Уменьшит его и выполнит **k-средних** на пикселях, чтобы найти доминирующие цвета (3 / 5 / 8 / 12 на выбор). 2. Назовёт каждый цвет (числами `color1`… или семантически `primary`/`accent`…) и покажет долю пикселей. 3. Опционально построит **шкалу оттенков** (Tailwind 50–950 или Material 100–900), сохраняя тон и насыщенность и варьируя светлоту. 4. Сериализует результат в CSS-переменные, SCSS, конфиг Tailwind, JSON-токены или всё сразу. Выберите `префикс` и стиль имён, скопируйте готовый код — и ваша дизайн-система сразу получит палитру. ## Входные данные - **Исходное изображение** (file): PNG, JPG, WebP… - **Размер палитры** (select) - **Шкала оттенков** (select) - **Формат вывода** (select) - **Префикс токена** (text): e.g. brand, app, theme - **Стиль имён** (select) ## Когда использовать - Создание дизайн-системы на основе референсного изображения или логотипа бренда. - Быстрый перенос цветовой гаммы из макета-скриншота в код фронтенда. - Генерация согласованных оттенков (50–950 или 100–900) для Tailwind CSS или Material Design из базовых цветов картинки. ## Как это работает - Загрузите изображение в формате PNG, JPG, WebP, GIF или AVIF размером до 10 МБ. - Выберите количество цветов (3, 5, 8 или 12), тип шкалы оттенков и формат экспорта. - Алгоритм k-средних проанализирует пиксели, определит доминирующие цвета и сгенерирует код с выбранным префиксом и стилем имён. ## Сценарии использования - Разработка темы для веб-приложения на основе ключевого баннера или иллюстрации. - Автоматическое создание конфигурационного файла Tailwind CSS из брендбука в виде картинки. - Подготовка JSON-файлов с дизайн-токенами для кроссплатформенных проектов. ## Частые вопросы ### Какие форматы изображений поддерживаются? Вы можете загрузить файлы PNG, JPEG, WebP, GIF и AVIF размером до 10 МБ. ### Как работает генерация шкалы оттенков? Инструмент сохраняет исходный тон и насыщенность цвета, изменяя только светлоту для создания гармоничного ряда от светлого к темному. ### Что такое семантический стиль имён? Это автоматическое присвоение цветам ролей вроде primary, accent и secondary вместо простых порядковых номеров. ### Можно ли получить токены сразу во всех форматах? Да, выберите вариант «Все форматы» в настройках вывода, чтобы сгенерировать CSS, SCSS, Tailwind JS и JSON одновременно. ### Как алгоритм k-средних выбирает цвета? Он группирует пиксели изображения по схожести цветов и находит центры этих групп, представляющие наиболее доминирующие оттенки. ## Связанные инструменты - [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown - [Массовое преобразование изображений](https://elysiatools.com/ru/tools/batch-convert): Преобразование нескольких изображений в разные форматы с настройкой качества - [Пакетная Обрезка Изображений](https://elysiatools.com/ru/tools/image-batch-crop): Пакетная обрезка нескольких изображений до определенных размеров или соотношения сторон с настраиваемым позиционированием. Возвращает обрезанные изображения в виде ZIP-архива. - [Изменитель Размера Изображений](https://elysiatools.com/ru/tools/image-resize): Профессиональный инструмент изменения размера изображений с множеством методов, сохранением соотношения сторон и конвертацией форматов, включая функцию размытия фона, поддерживающую GIF/Animated WebP/APNG и JPEG/PNG/WEBP. - [Конвертер глубины цвета изображения в PNG](https://elysiatools.com/ru/tools/image-to-bit-depth-png): Преобразует изображения в точные монохромные, индексированные, серые, RGB или RGBA PNG с проверкой результата. - [Пакетный конвертер изображений в WebP](https://elysiatools.com/ru/tools/image-to-webp-batch-converter): Преобразует изображения или изображения из ZIP в WebP и возвращает ZIP - [PDF контакт-лист](https://elysiatools.com/ru/tools/pdf-photo-contact-sheet): Создает контактные листы с миниатюрами, именами файлов и EXIF - [Пакетное Преобразование Изображений](https://elysiatools.com/ru/tools/image-batch-convert): Конвертируйте несколько файлов изображений между различными форматами, такими как JPG, PNG, WebP, AVIF, TIFF, GIF с настройками качества и пакетной обработкой ## Примеры - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата - [Примеры Обработки Изображений Web TypeScript](https://elysiatools.com/ru/samples/web-image-processing-typescript): Примеры обработки изображений Web TypeScript включая чтение/сохранение, масштабирование и конвертацию форматов - [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата - [Примеры Обработки Изображений Android Kotlin](https://elysiatools.com/ru/samples/android-image-processing-kotlin): Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата ## Связанные материалы - [Инструменты конвертации форматов изображений и анимированного экспорта](https://elysiatools.com/ru/hubs/image-convert): Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе. - [Инструменты JSON-обмена и перевода форматов](https://elysiatools.com/ru/hubs/json-convert): Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе. - [Инструменты для проверки, diff и преобразования JSON](https://elysiatools.com/ru/hubs/json-utility): Соберите в одном хабе инструменты для форматирования JSON, сравнения версий, проверки путей, валидации схем, объединения файлов и преобразования данных для API и data workflows. - [Инструменты для очистки, оформления и пакетной подготовки изображений](https://elysiatools.com/ru/hubs/image-utility): Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.