Извлечение палитры из изображения

Как выбираются цвета

Изображение отрисовывается на канве, а его пиксели группируются методом K-средних с инициализацией K-Means++ — так стартовые точки расходятся по всему изображению, а не сбиваются в одном его углу. Групп запрашивается больше, чем вы просили, и слишком близкие сливаются уже после, поэтому восемь образцов возвращаются восемью разными цветами, а не одним цветом в восьми светлотах.

Как закрепить удачное

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

Что означают проценты

Каждое число — доля этого цвета среди отобранных пикселей, и набор на экране всегда даёт в сумме ровно 100. Эти же числа задают ширину полосы покрытия и попадают в экспорт в CSS, JSON и PNG, поэтому они описывают именно видимые образцы, а не список, урезанный уже после подсчёта.

По шагам

1. Перетащите изображение, выберите файл на устройстве или вставьте ссылку, ведущую прямо на файл картинки.
2. Задайте количество цветов — до десяти — и отсортируйте их по доле, тону или светлоте.
3. Закрепите удачные образцы и пересобирайте остальные, пока набор не устроит.
4. Скопируйте отдельное значение или выгрузите палитру в CSS, JSON, конфиг Tailwind либо PNG-лист образцов.

Частые вопросы