Палитра из картинки

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

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

Палитра пересчитывается сразу при движении ползунка; изображение читается только один раз. Рядом с каждым цветом показана его доля, например «38 % пикселей».

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

1. Изображение рисуется на маленьком холсте (не больше 96 пикселей по длинной стороне) — около 9 000 пикселей, поэтому кластеризация быстрая даже для больших фото.
2. Пиксели с непрозрачностью меньше половины не учитываются.
3. K-means начинает с k пикселей, выбранных по правилу k-means++ (далеко друг от друга, с фиксированным зерном), относит каждый пиксель к ближайшему центру в RGB, сдвигает каждый центр в среднее его пикселей и повторяет, пока ничего не меняется или не пройдёт 24 раунда.
4. Цвета сортируются по числу пикселей, от большего к меньшему.

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

CSS-блок выглядит так:

:root {
  --color-1: #1f3a5f;
  --color-2: #e8d9b5;
}

Вставьте его в таблицу стилей и пишите var(--color-1). Прежде чем ставить два цвета палитры вместе, проверьте контраст текста.

Советы

• Если в палитре несколько почти одинаковых оттенков одного фона, уменьшите число цветов.
• Обрежьте картинку до нужного фрагмента, если важны цвета предмета, а не фона.