Извлечение цветовой палитры

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

Как работает Извлечение цветовой палитры

Извлечение цветовой палитры анализирует изображение и определяет наиболее визуально доминирующие цвета с помощью алгоритма k-средних, применяемого к пиксельным данным в Canvas. Результатом является набор цветовых образцов с их HEX-значениями, которые можно скопировать по отдельности. Ни один байт изображения не покидает браузер; выборка пикселей выполняется локально в Web Worker, чтобы основной поток оставался отзывчивым.

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

Автор: Bastien Sulyan

Извлечение цветовой палитры: пошаговая инструкция

Перетащите изображение в область загрузки или нажмите для выбора файла.
Задайте количество цветов для извлечения (обычно от 5 до 12).
Нажмите «Извлечь». Кластеризация пикселей выполняется локально в Web Worker.
Посмотрите полученные цветовые образцы и их HEX-значения.
Нажмите на любой образец, чтобы скопировать его HEX-код в буфер обмена.

Частые сценарии использования

Дизайнер извлекает доминирующую палитру из фирменной фотографии, чтобы новые маркетинговые материалы соответствовали существующей цветовой истории.
Разработчик определяет основные цвета в аватаре, загруженном пользователем, для динамической генерации соответствующего акцентного цвета интерфейса.
Художник создаёт референсный мудборд, извлекая палитры из нескольких референсных изображений и сравнивая извлечённые HEX-коды.
Блогер вытаскивает пять доминирующих тонов из фотографии заголовка, чтобы выбрать дополнительные цвета текста и кнопок для макета публикации.

Часто задаваемые вопросы

Как работает алгоритм извлечения цветов?

Инструмент считывает все пиксельные значения из изображения через Canvas.getImageData(), уменьшает выборку для ускорения работы, затем запускает алгоритм k-средних. Центроид каждого кластера становится одним из выходных цветов. K-средние группируют пиксели по близости цвета, так что доминирующие визуальные тона проявляются как цвета центроидов.

Требует ли извлечение цветов загрузки изображения?

Нет. Выборка пикселей происходит внутри Web Worker в браузере. Изображение считывается с локального диска, рисуется на OffscreenCanvas, и массив пикселей обрабатывается в памяти. Данные не покидают устройство.

Почему извлечённые цвета немного отличаются от того, что видно на изображении?

Центроиды k-средних представляют математическое среднее кластера цветов пикселей. Цвет, который очень распространён, но слегка варьируется (голубое небо с небольшими градиентными вариациями), даст центроид, являющийся средним оттенком, а не точным пиксельным значением. Результат это репрезентативное среднее, а не выборка конкретного пикселя.

Можно ли извлечь палитры из фотографий с прозрачностью?

Полностью прозрачные пиксели (альфа = 0) исключаются из кластеризации, чтобы прозрачная область не смещала извлечённые цвета в сторону чёрного или белого в зависимости от заливки фона Canvas. Полупрозрачные пиксели включаются в выборку с весом, пропорциональным их значению альфа.

В каком формате представлены коды цветов?

Инструмент выводит HEX-коды (например, #3A7BD5). Если нужны RGB, HSL или другие форматы, скопируйте HEX-значение в инструмент «Конвертер цветов», который принимает HEX и конвертирует во все распространённые цветовые модели.