Как алгоритм находит доминантные цвета на фото
Простым языком о квантовании цвета: гистограмма, median cut, k-means, пространство Lab и ΔE. Почему палитра из фото выглядит именно так.
Инструкции · · 3 мин чтения
Доминантные цвета — это цвета, которые занимают на изображении наибольшую площадь. Алгоритм находит их в три этапа: уменьшает количество возможных цветов (квантование), считает, сколько пикселей попало в каждую группу, и выбирает самые крупные группы, которые заметно отличаются друг от друга. Именно так работает генератор палитры.
Почему нельзя просто посчитать все цвета
В обычной фотографии десятки и сотни тысяч уникальных цветов: соседние пиксели неба отличаются на одну-две единицы из-за шума и сжатия. Если считать каждый цвет отдельно, в топе окажутся случайные оттенки с одинаково малыми долями. Поэтому похожие цвета сначала объединяют в группы.
Этап 1. Квантование
Квантование — это сокращение палитры изображения до ограниченного числа цветов. Популярные методы:
| Метод | Идея | Плюсы и минусы |
|---|---|---|
| Гистограмма с шагом | Делим каждый канал RGB на диапазоны (например, по 8 единиц) и считаем пиксели в каждой «ячейке» | Очень быстро; границы ячеек случайны |
| Median cut | Делим «коробку» цветов пополам по самому широкому каналу, пока не получим N коробок | Классика, хорошо работает на фото |
| k-means | Итеративно двигаем N центров к средним цветам своих групп | Точно, но медленнее и зависит от старта |
| Octree | Строим дерево по битам RGB и сливаем мелкие ветви | Экономно по памяти |
Этап 2. Объединение похожих оттенков
Чтобы в палитру не попали два почти одинаковых бежевых, группы сравнивают между собой. Сравнивать удобнее не в RGB, а в пространстве CIE Lab, где расстояние между цветами ближе к тому, как разницу видит человек. Это расстояние называется ΔE (дельта E):
- ΔE < 1 — разницу почти невозможно заметить;
- ΔE 2–10 — разницу видно при внимательном сравнении;
- ΔE > 10 — цвета воспринимаются как разные.
Генератор объединяет группы с ΔE меньше 10, а в итоговую палитру берёт цвета, которые отличаются сильнее.
Этап 3. Фильтрация и сортировка
- Отсев шума. Почти белые и почти чёрные пиксели (блики, тени, рамки) отбрасываются, если занимают меньше 30% площади. Если фото действительно в основном белое, белый останется.
- Сортировка по доминантности. Первым идёт цвет, которого на снимке больше всего.
- Разнообразие. Если фото однотонное и различных цветов мало, порог различия постепенно снижается, чтобы набрать нужное количество.
Почему всё это работает в браузере
Фото уменьшается до 1600 пикселей по длинной стороне, а пиксели анализируются выборочно — этого достаточно для точной палитры. Расчёт идёт в фоновом потоке (Web Worker), поэтому страница не подвисает, а снимок не покидает устройство.
Частые вопросы
Почему палитра одного фото в разных сервисах отличается?
Сервисы используют разные методы квантования, пороги различия и фильтры шума. Нет единственно правильной палитры: есть набор цветов, которые лучше описывают снимок для конкретной задачи.
Что лучше: k-means или median cut?
Для быстрой палитры из фото оба дают хороший результат. k-means точнее подстраивается под редкие цвета, median cut быстрее и предсказуемее.
Можно ли получить больше 8 цветов?
Для дизайна больше 8 цветов обычно лишние: их трудно использовать согласованно. Для анализа изображений существуют инструменты, которые строят палитры на 16–256 цветов.