Извлекайте доминантные цвета из загруженного изображения, дискретизируя пиксели, квантуя близкие значения и ранжируя самые частые образцы. Каждый результат включает код CSS hex и соответствующий кортеж RGB через общий цветовой helper.
Алгоритм (упрощённо)
- Нарисовать изображение на canvas в полном разрешении
- Пройти пиксели с шагом (по умолчанию каждый 4-й) ради производительности
- Пропускать почти прозрачные пиксели (alpha ниже 128)
- Квантовать каналы в корзины с шагом 32, чтобы объединить почти-дубликаты
- Отсортировать корзины по частоте и вернуть топ-N цветов
Это палитра по частоте, а не перцептуальная кластеризация (без k-means). Хорошо подходит для плоской UI-графики и постеров; шумные фотографии могут давать мутные полутона.
Когда использовать
- Собрать палитру из брендового фото или растрового логотипа
- Сочетать с инструментами Colors (
from-hex-to-rgb) для дальнейших преобразований - Документировать design tokens, извлечённые из маркетинговых скриншотов
Ограничения
Сильно сжатые JPEG и градиенты дают усреднённые цвета. Прозрачные фоны PNG/WebP игнорируются при низком alpha. Очень большие изображения сэмплируются редко—крайняя детализация может быть упущена. Результаты ориентировочные и не заменяют профессиональные средства извлечения палитр.
Пример
Например, введите значения образца по умолчанию в форме и сравните вывод с известным эталоном; меняйте по одному входу за раз, чтобы увидеть, как меняется результат.