Извлечение цветовой палитры

K-Means — алгоритм машинного обучения, который группирует пиксели в K цветовых кластеров. Он начинает со случайных центроидов (первых предположений о цвете), относит каждый пиксель к ближайшему из них, затем пересчитывает центроид как среднее всех отнесённых к нему пикселей. Так повторяется, пока центроиды не перестанут смещаться. Мы используем инициализацию K-Means++: она выбирает более разнесённые стартовые точки, что улучшает охват цветов и снижает риск получить одинаковые кластеры.

Процент показывает долю цвета в изображении — сколько пикселей относится к этому кластеру. Значение 40% означает, что примерно 40% непрозрачных пикселей ближе всего к этому цвету. После слияния очень похожих цветов проценты пересчитываются, поэтому в сумме всегда получается 100%.

Экспорт в CSS выдаёт блок :root с пользовательскими свойствами вида --color-1, --color-2 и так далее. Вставьте его в глобальный файл стилей и обращайтесь к переменным через var(--color-1). Это самый быстрый способ применить извлечённые цвета в веб-проекте, не перенося hex-значения вручную.

Загруженный файл — нет. Изображение читается как data URL, рисуется на скрытом холсте и анализируется локально; оно не уходит с вашего устройства, и с файлами инструмент работает даже без сети. Единственное исключение — поле со ссылкой: браузеру не разрешено читать пиксели картинки с чужого сайта, поэтому такой адрес запрашивается через наш сервер, а изображение передаётся странице. Само изображение при этом нигде не сохраняется.

Извлечённые цвета отражают реальное содержимое изображения, а не гармоничную схему из теории цвета. Для брендинга берите доминирующие цвета как отправную точку: возьмите один-два самых заметных и посмотрите в конвертере их комплементарные, аналоговые и триадные отношения. Проценты помогают понять, какие цвета основные (брендовые), какие второстепенные (акцентные), а какие нейтральные (фоновые).

Лучше всего получаются палитры из фотографий с богатым цветом — природа, еда, путешествия. Логотипы и фирменные материалы дают чистые сфокусированные палитры из 2–4 доминирующих цветов. Скриншоты хорошо подходят, чтобы снять цветовую схему сайта. Сильно сжатый JPEG может дать артефакты, слегка искажающие цвета, — для точного результата берите PNG или качественный JPEG.

JSON-экспорт — это массив объектов с полями hex, rgb и coverage. Такой формат напрямую годится в качестве дизайн-токенов для Style Dictionary, Theo или Cobalt. Его можно импортировать в Figma через плагин Design Tokens или использовать в JavaScript/TypeScript, чтобы программно применять цвета к генерируемым компонентам.