Извлечение палитры из изображения

Извлекайте доминирующие цвета из изображений и экспортируйте палитры как HEX, переменные CSS или JSON.

Загрузка изображения
Выберите изображение для локальной выборки цветов в браузере.
Настройки палитры
Управляйте количеством извлекаемых цветов и их сортировкой.
8

Выберите от 3 до 12 цветов палитры.

Более высокое качество выбирает больше пикселей и может занимать больше времени для больших изображений.

Меняйте порядок отображения, не изменяя набор извлеченных цветов.

Пропускать полностью прозрачные пиксели при поиске доминирующих цветов.

Результаты палитры
Просмотрите, скопируйте и экспортируйте извлеченную палитру.
Палитры пока нет
Загрузите изображение, чтобы увидеть доминирующие цвета и варианты экспорта.

Что делает этот инструмент

Инструмент извлечения палитры находит доминирующие цвета в изображении прямо в вашем браузере. Он анализирует изображение, группирует визуально похожие пиксели и возвращает практичную палитру со значениями HEX, RGB, HSL и процентной долей для каждого цвета.

Подходящие задачи

  • Получить цвета бренда или продукта из скриншота, логотипа, фотографии или макета.
  • Быстро собрать CSS-палитру для посадочной страницы, миниатюры или передачи дизайна.
  • Сравнить, какую долю изображения занимает доминирующий цвет и какую - вспомогательные акценты.
  • Работать с приватными изображениями, не отправляя файл на сервер.

Варианты экспорта

Результат можно скопировать как простой список HEX, пользовательские свойства CSS или JSON. Формат CSS полезен, когда нужны переменные вроде --palette-1, а JSON сохраняет форматы цвета и долю доминирования вместе для скриптов или автоматизации дизайна.

На что обратить внимание

  • Извлечение палитры приблизительное. Оно предназначено для получения полезных визуальных групп, а не полного списка цветов каждого пикселя.
  • Прозрачные пиксели по умолчанию игнорируются, чтобы значки и вырезанные изображения не искажали палитру; отключите это, если сама прозрачность является частью иллюстрации.
  • Точный режим качества анализирует больше пикселей и может работать медленнее с очень большими изображениями.