Руководство по извлечению палитры

Извлекайте доминирующие цветовые палитры из изображений JPG, PNG, WebP, AVIF, GIF, BMP или TIFF. Получайте HEX и RGB коды для каждого цвета. Каждое извлечение выполняется локально в вашем браузере — без загрузки на сервер.

Что вам понадобится

Браузер — Chrome, Firefox, Safari или Edge с поддержкой OffscreenCanvas Форматы — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP или TIFF Лимит — 20 МБ на файл (файлы больше 20 МБ будут отклонены) Аккаунт — не требуется Интернет — не нужен после загрузки страницы

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

Откройте Palette Generator в браузере. Перетащите файл изображения из проводника в зону загрузки. Либо нажмите на область загрузки, чтобы выбрать файл на устройстве.

Перед загрузкой убедитесь, что размер файла не превышает 20 МБ — файлы больше этого размера будут отклонены. Выберите количество цветов для извлечения: 5, 8, 10 или 12. Меньшее количество цветов дает более чистые и удобные палитры.

Большее количество позволяет уловить тонкие оттенки, но может включать незначительные различия, которые визуально неразличимы. Нажмите кнопку извлечения. Алгоритм квантования обработает данные пикселей изображения прямо в браузере.

Он группирует пиксели по цветовому сходству с помощью кластеризации k-средних и вычисляет средний цвет для каждого кластера. Данные не передаются по сети. Просмотрите извлеченную палитру.

Каждый цвет отображается в виде образца с HEX-кодом и значениями RGB. Нажмите на код цвета, чтобы скопировать его в буфер обмена. Используйте эти коды в своих проектах, CSS или при печати.

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

Palette Generator использует элемент OffscreenCanvas и алгоритм квантования цвета для извлечения доминирующих цветов. Когда вы загружаете изображение, браузер считывает его непосредственно в память через File API — загрузка на сервер не происходит.

libvips создает внеэкранный холст с помощью OffscreenCanvas и отрисовывает ваше изображение в исходном разрешении с помощью drawImage. Затем он считывает данные пикселей как массив RGBA с помощью getImageData, который возвращает Uint8ClampedArray, содержащий значения красного, зеленого, синего и альфа-канала для каждого пикселя. Для изображения 1920x1080 это дает около 8 миллионов отдельных цветовых значений.

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

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

Каждый цвет отображается как образец с HEX-кодом и значениями RGB. libvips выбирает точный центроидный цвет из каждого кластера, гарантируя, что отображаемый образец точно представляет математическое среднее всех пикселей в этой группе.

Файлы обрабатываются полностью внутри вашего браузера с использованием OffscreenCanvas. Они никогда не загружаются на серверы ConvertCraft.

Что делать, если возникли проблемы

Изображение не загружается: размер вашего изображения превышает лимит в 20 МБ. OffscreenCanvas работает в рамках строгих ограничений памяти. Обработка изображений размером более 20 МБ требует огромных несжатых буферов пикселей в оперативной памяти, что может привести к сбою вкладки браузера.

Палитра содержит похожие цвета: изображение имеет тонкие цветовые вариации, которые алгоритм воспринимает как отдельные кластеры. Уменьшите размер палитры, чтобы получить меньше, но более выраженных цветов.

Цвета не соответствуют тому, что я вижу: алгоритм извлекает математические средние значения. Перцептивные различия между цветами могут не совпадать с визуальным восприятием. Попробуйте другой размер палитры или используйте инструмент «пипетка» для конкретных пикселей.

Палитра состоит в основном из одного цвета: в вашем изображении доминирует один цвет. Алгоритм точно отражает распределение цветов на изображении. Попробуйте другое изображение с большим разнообразием цветов.

### Сколько цветов я могу извлечь?

Инструмент поддерживает извлечение 5, 8, 10 или 12 цветов. Меньшее количество цветов дает более чистые палитры. Большее количество позволяет уловить тонкие вариации, но может включать незначительные различия, которые визуально неразличимы.

### Можно ли извлечь цвета из определенной области?

Текущая версия анализирует все изображение целиком. Чтобы извлечь цвета из определенной области, сначала обрежьте изображение с помощью Image Converter или специального инструмента для обрезки, а затем загрузите обрезанную версию.

### Безопасно ли извлекать цвета из личных изображений?

Да. Файлы обрабатываются полностью внутри вашего браузера с использованием OffscreenCanvas. Они никогда не загружаются на серверы ConvertCraft.

Данные вашего изображения никогда не покидают ваш компьютер, что делает их полностью защищенными от перехвата по сети или ведения логов на стороне сервера.