Зачем мы добавили автоматическое извлечение палитры в инструмент выбора цвета

Наш инструмент выбора цвета всегда позволял загрузить изображение и щёлкнуть по любому пикселю, чтобы получить его точное значение в HEX, RGB и HSL. Это отвечает на вопрос «какого цвета эта конкретная точка?» — полезно, но это не тот вопрос, который на самом деле возникает у большинства людей при загрузке фото. Обычно это «какая общая цветовая гамма у этого изображения?» — извлечь фирменную палитру из логотипа или подобрать настроение референсного фото для цветовой схемы сайта.

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

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

Здесь не задействована никакая ИИ-модель, и ничего никуда не загружается — это простой алгоритм подсчёта частоты, который выполняется за несколько миллисекунд:

Изображение уменьшается до холста 80×80. Для цветовой статистики не нужно полное разрешение, а уменьшение делает всё мгновенным даже для больших фото.
Каждый пиксель распределяется по корзинам согласно огрублённой версии его цвета — старшим 5 битам каждого RGB-канала, так что визуально почти идентичные пиксели попадают в одну корзину, а не считаются каждый как уникальный цвет.
Корзины сортируются по количеству попавших в них пикселей, и восемь самых крупных становятся палитрой — каждая показывается как средний цвет всего, что в этой корзине.

Вот и всё. Никакого машинного обучения, никаких внешних сервисов — просто уменьшение и подсчёт, поэтому это происходит мгновенно и никогда не покидает ваш браузер.

Кликните по образцу — получите код

Каждый образец палитры кликабелен: щёлкните по нему, и он станет активным цветом инструмента, с автоматически заполненными HEX, RGB и HSL, а hex-значение будет скопировано в буфер обмена тем же кликом. Есть также кнопка «копировать все», если нужна вся палитра в виде списка через запятую — удобно для вставки прямо в дизайн-инструмент или блок CSS-переменных.

Попробуйте

Загрузите любое изображение — скриншот, логотип, фото — на странице инструмента выбора цвета, и палитра появится автоматически под ним.