Извлечённая палитра
Нажмите на образец, чтобы скопировать его HEX, или скопируйте CSS-переменные и JSON для всей палитры.
Скопировано в буфер обмена.
Выберите изображение, чтобы извлечь палитру цветов.
:root Приватный инструмент для цвета
Экстрактор палитры цветов из любого изображения
Выберите фото, логотип, скриншот или иллюстрацию и получите применимую палитру с HEX, RGB, HSB, OKLCH, CSS-переменными и JSON, готовыми к вставке.
Изображение обрабатывается локально через Canvas API браузера и не отправляется ни на какой сервер.
Рабочая область экстрактора
Перетащите изображение в экстрактор, выберите от 5 до 10 доминирующих цветов и скопируйте формат, который подходит вашему процессу в дизайне или во фронтенде.
Чем этот экстрактор помогает в реальной работе
Экстрактор палитры полезен только тогда, когда отдаёт то, что можно сразу переиспользовать.
Анализирует изображение целиком
Вместо того чтобы тыкать пипеткой в отдельные пиксели, инструмент группирует видимые пиксели и выдаёт доминирующие цвета как готовую отправную точку.
Отдаёт готовый к вставке код
Вы получаете HEX, RGB, HSB, OKLCH, CSS-переменные и JSON, поэтому палитра сразу уходит в сайты, дизайн-системы и компоненты без лишней работы.
Как пользоваться экстрактором палитры
Путь намеренно короткий: выберите изображение, посмотрите цвета, скопируйте и при необходимости доведите в своём редакторе.
01
Выберите изображение
Возьмите JPG, PNG, WebP или GIF со своего устройства. Браузер декодирует файл и готовит локальную выборку через Canvas.
- Скриншоты работают отлично
- Логотипы и иллюстрации обычно дают более чистые палитры
02
Задайте размер палитры
Берите 5 цветов для компактной бренд-палитры или 8–10, когда на фото, иллюстрации или скриншоте больше разнообразия.
Группировка выполняется в браузере лёгким алгоритмом, чтобы инструмент оставался быстрым и приватным.
03
Скопируйте результат
Нажмите на любой образец, чтобы скопировать HEX, или скопируйте CSS-переменные и JSON, когда нужен структурированный вывод для проекта.
Используйте значения OKLCH, когда хотите точнее управлять воспринимаемой светлотой и насыщенностью в современном CSS.
Скопировать палитруФорматы, которые отдаёт экстрактор
Инструмент сосредоточен на форматах, которые дизайнеры и разработчики действительно вставляют в проекты.
HEX
Стандартные шестизначные шестнадцатеричные значения, которые используют в CSS, Figma, редакторах и брендбуках.
RGB
Пригодится для работы с Canvas, вычислений цвета в JavaScript и быстрых значений rgb() в CSS.
HSB
Тон, насыщенность и яркость, чтобы понимать, как каждый извлечённый цвет ведёт себя визуально.
OKLCH
Современный ориентир для воспринимаемой светлоты, насыщенности и тона.
CSS-переменные
Готовый блок :root для быстрых прототипов и экспериментов с дизайн-токенами.
JSON
Структурированные данные, чтобы преобразовать палитру в сборке или в коде приложения.
Вопросы и ответы
Для дизайнеров, художников и разработчиков, которые пользуются экстрактором палитры Palette Lab.
Как работает экстрактор палитры?
Инструмент выбирает видимые пиксели изображения прямо в браузере, группирует похожие цвета и возвращает доминирующие цвета палитры.
Мои изображения загружаются на сервер?
Нет. Экстрактор работает локально через Canvas API браузера, поэтому выбранное изображение не отправляется на серверы Palette Lab.
Какие форматы изображений поддерживаются?
Те, которые браузер умеет декодировать: JPG, PNG, WebP и GIF. Поддержка может отличаться в зависимости от устройства и браузера.
Можно ли использовать результат прямо в CSS?
Да. Инструмент генерирует готовые к копированию CSS-переменные, а также HEX, RGB, HSB, OKLCH и JSON для каждого извлечённого цвета.
Извлеките палитру из следующего изображения
Перетащите скриншот, логотип, иллюстрацию или фото и превратите их в применимую палитру.
Потом скопируйте HEX, CSS-переменные или JSON и работайте дальше.
Экстрактор палитры бесплатный, приватный и работает в браузере.