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

Что такое экстрактор палитры изображения?#

В каждой картинке есть небольшой набор цветов, делающих основную работу — фирменный синий логотипа, тёплые нейтральные тона продуктового кадра, двухцветная палитра иллюстрации. Экстрактор палитры автоматически вытягивает эти представительны цвета, чтобы вы могли их переиспользовать: построить согласованную тему интерфейса, подобрать цвет кнопки, который не конфликтует, сгенерировать CSS-переменные или просто понять, какие образцы реально доминируют в изображении, а не те, что глазу кажутся важными.

Эта страница выполняет квантование цветов медианным разрезом целиком в вашем браузере. Вы загружаете изображение, оно масштабируется вниз до рабочей выборки, читается каждый пиксель, и алгоритм повторно делит цветовое пространство по самому широкому каналу, пока не получит запрошенное вами Top-N образцов (2–16). Каждый цвет даётся как образец с его долей в изображении плюс прямым средним цветом; экспорт доступен как HEX-список, файл CSS-переменных или структурированный JSON.

Как пользоваться#

1. Перетащите изображение в пунктирную зону перетаскивания (или щёлкните её, чтобы выбрать файл). PNG, JPEG и WebP работают; прозрачные PNG обрабатываются корректно, потому что прозрачные пиксели исключаются до подсчёта.
2. Перетащите ползунок Количество цветов (2–16), чтобы выбрать, сколько представительны цветов извлекать. Шесть — хорошее значение по умолчанию для сбалансированной палитры; два или три изолируют доминирующую пару.
3. Читайте список образцов справа: каждая строка показывает цвет, его значения HEX/RGB/HSL и процент выборочных пикселей, попавших в этот «карман», отсортировано от наиболее частого к менее частым. Щёлкните по любому значению, чтобы скопировать его.
4. Загляните в карточку Средний цвет на боковой панели — там прямое среднее каждого пикселя; полезно, когда нужен один общий фоновый тон, а не ранжированная палитра.
5. Выберите формат скачивания:
   • HEX-список (.txt) — один #RRGGBB на строку, доминирующий первым. Вставьте прямо в дизайнерский инструмент.
   • CSS-переменные (.css) — блок :root { --palette-1: …; …; --palette-avg: …; }, который можно бросить в таблицу стилей.
   • JSON (.json) — структурированные образцы с hex, rgb, count и share, плюс средний цвет и метаданные выборки.
6. Нажмите Скачать палитру, чтобы сохранить файл.

Ключевые возможности#

• Квантование медианным разрезом, собственной реализации. Тот же класс алгоритмов, что используют профессиональные инструменты для изображений, работает в вашей вкладке: разрез по самому широкому каналу на медиане, повтор на самом широком «ящике» на данный момент, пока не достигнут запрошенный счётчик.
• Честные числа долей. Каждый образец несёт реальную долю выборочных пикселей, которую он представляет, поэтому «доминирующий» — значит доминирующий по площади, а не на глаз.
• Средний отделён от доминантного. Прямое среднее по пикселям даётся рядом с ранжированной палитрой — два разных вопроса, отвеченные за один проход.
• Прозрачные пиксели пропущены. Альфа ниже малого порога исключается, поэтому прозрачный PNG сообщает цвета, которые реально отрисованы, а не грязную смесь с прозрачностью.
• Три формы экспорта. HEX-список для дизайнерских инструментов, CSS-переменные для таблицы стилей, JSON для программ — все сгенерированы из тех же образцов, которые вы видите.
• 100 % локально. Изображение декодируется и семплируется браузером. Загрузки нет.

Разбор примера#

Загрузите брендовый логотип глубокого корпоративного синего на белом фоне с небольшим акцентом — скажем, синий заполняет около 60 % холста. С Количеством цветов, установленным в 4, типичная экстракция выглядит так:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

Доминирующий образец — брендовый синий около 58 %, белый второй. Обратите внимание на два дополнительных синих — более тёмный оттенок и более светлый тон, — которые алгоритм нашёл потому, что они пересекают границу медианы; это именно те цвета, что вы переиспользовали бы для состояний наведения и теней. Экспортируйте как CSS-переменные и получите готовую тему:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg — прямое среднее всех пикселей: приглушённый сине-средний тон, который хорошо работает как фон страницы с лёгким уклоном в брендовый цвет.

FAQ#

Проценты в сумме не дают ровно 100 %.#

Они округлены для отображения (базовые значения точны до четырёх знаков после запятой в JSON-экспорте). Небольшой остаток также возникает из-за того, что прозрачные пиксели исключаются до подсчёта, поэтому итог отражает только непрозрачные пиксели, которые реально были семплированы.

Я получаю меньше образцов, чем просил.#

Медианный разрез останавливается раньше, когда каждый оставшийся цветовой «ящик» однороден (диапазон нулевой по всем каналам) — делить реально нечего. Запрос 8 цветов на 3-цветном изображении вернёт 3, а не 8 выдуманных.

Почему средний цвет так сильно отличается от доминирующего?#

Они отвечают на разные вопросы. Доминирующий цвет — единственный самый частый «карман»; средний — арифметическое среднее каждого пикселя, которое несколько больших, но разноцветных областей могут оттянуть от самого частого значения. Изображение «наполовину красное, наполовину зелёное» имеет коричневатое среднее, но коричневого среди доминант нет — оба числа корректны.

Работает ли инструмент с фотографиями или только с плоской графикой?#

С обоими. Плоская графика даёт чистые, хорошо разделённые образцы; фотографии дают более градиентный набор, потому что реальные тона раскиданы по множеству соседних цветов. Для фотографии поднимите Количество цветов до 8–12, чтобы охватить более богатый диапазон.