Что такое извлечение цветовой палитры?

Инструмент анализирует пиксели изображения и выделяет наиболее характерные цвета. Результат — набор hex-кодов, представляющих доминирующую палитру изображения.

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

Используется алгоритм k-means кластеризации, который работает прямо в браузере:

Изображение уменьшается до рабочего разрешения для скорости.
Пиксели группируются в k кластеров по близости цвета.
Центроид каждого кластера становится цветом палитры.
Цвета сортируются по доминированию — самый частый цвет идёт первым.

Сторонние библиотеки не используются. Алгоритм работает на чистом JavaScript через Canvas API.

Где применяется

UI-дизайн — согласовать цвета интерфейса с главным изображением или фото продукта
Фирменный стиль — извлечь палитру из логотипа или мудборда
Веб-разработка — сгенерировать CSS-переменные из изображения
Иллюстрация — анализ цветовой гармонии референсных изображений
Соцсети — создать последовательную визуальную тему для ленты

Как использовать

Перетащите изображение в зону загрузки или нажмите для выбора файла.
Выберите количество цветов (2–12).
Нажмите Извлечь палитру.
Нажмите на строку цвета, чтобы скопировать hex-код.
Нажмите Скопировать CSS переменные, чтобы получить блок :root { --palette-1: … }.

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

Какие форматы изображений поддерживаются?

Любые форматы, которые браузер умеет декодировать: PNG, JPEG, WEBP, GIF, AVIF и большинство других.

Почему результаты немного отличаются при каждом запуске?

K-means использует случайную инициализацию. Финальная палитра обычно стабильна, но для изображений с похожими цветами незначительные отличия между запусками возможны.

Сколько цветов выбрать?

6 — хорошее значение по умолчанию. Для простой графики и логотипов — 3–4, для насыщенных фотографий со сложным распределением цветов — 8–12.

Можно ли использовать полученные hex-коды сразу в CSS?

Да. Кнопка Скопировать CSS переменные создаёт готовый блок :root {} с переменными --palette-1 … --palette-N.