Извлечение цветовой палитры из изображения — бесплатно
Извлекайте доминирующие цвета из любого изображения с помощью квантизации цветов k-средних. Получайте HEX-коды для 2–16 основных цветов в вашем фото или логотипе.
Перетащите файл сюда или нажмите для выбора
JPG, PNG, WebP, GIF, HEIC, HEIF · обрабатывается на вашем устройстве
или нажмите Ctrl+V, чтобы вставить из буфера обмена
Совет: скриншот можно вставить сочетанием Ctrl+V
Ваши файлы никогда не покидают устройство. Вся обработка происходит локально в браузере.
Частые применения
- Извлечение цветов бренда из логотипаПолучайте точные коды hex для доминирующих цветов в любом логотипе или изображении бренда.
- Создание веб-палитр цветов из фотографийГенерируйте совпадающие веб-палитры цветов из фотографий героев или фоновых изображений.
- Извлечение цветов из фотографий вдохновенияИзвлекайте цветовые палитры из фотографий дизайна интерьера или моды для использования в ваших собственных проектах.
- Анализ палитр живописи и произведений искусстваИзучайте палитры цветов известных картин или своего собственного искусства, извлекая доминирующие цвета.
- Тема CSS из изображенийГенерируйте темы переменных CSS из изображений — полезно для динамических тем или автоматически генерируемых цветовых схем.
Как это работает
Извлечение цвета полностью работает в вашем браузере с использованием написанного вручную алгоритма кластеризации k-means++, применённого к необработанным данным пикселей, считанным из API Canvas — без сервера, без сторонней библиотеки. Одно и то же изображение и настройки количества цветов всегда производят одну и ту же палитру, потому что алгоритм использует детерминированный генератор псевдослучайных чисел (mulberry32), а не Math.random.
- 1Canvas считывает данные пикселейИзображение рисуется на закадровом элементе HTML Canvas и субдискретизируется до не более 200px на самой длинной стороне. getImageData() API Canvas возвращает каждый пиксель как необработанные байты RGBA, а полностью прозрачные пиксели (альфа < 128) отбрасываются перед началом кластеризации.
- 2k-means++ кластеризует пикселиИнициализатор k-means++ засевает центроиды детерминированно, затем алгоритм итерирует до 20 раз: каждый пиксель назначается ближайшему центроиду в пространстве RGB, затем центроиды пересчитываются как среднее всех назначенных пикселей. Кластеры, схлопывающиеся в одно и то же значение hex, объединяются, так что каждый образец в результате уникален.
- 3Вычисляются метаданные для каждого цветаКаждый центроид конвертируется в HEX, HSL и его долю от общего количества пикселей (процент). Относительная яркость WCAG вычисляется по стандартной формуле, а коэффициенты контраста с чёрным и белым показываются рядом с каждым образцом.
- 4Экспорт и вывод пипеткиПалитру можно скопировать как пользовательские свойства CSS, переменные SCSS, фрагмент конфигурации Tailwind или JSON. Пипетка «клик-для-пробы» сопоставляет ваш клик на предпросмотре обратно с точными координатами исходного пикселя на холсте с полным разрешением, добавляя цвет этого пикселя в отдельный список выбранных цветов. Полосу палитры PNG можно скачать через Canvas toBlob().
Ваше изображение никогда не загружается — оно декодируется и обрабатывается полностью в памяти вашего браузера, и только размер файла (в КБ) сообщается в аналитику.
Похожие инструменты
Генератор случайных цветов
Создавайте случайные цвета по одному или палитрой из пяти, фиксируйте понравившиеся, копируйте значения HEX, RGB или HSL и экспортируйте палитру как PNG или CSS.
Генератор цветовых палитр
Генерируйте дополнительные, аналогичные, триадные и монохроматические цветовые палитры из любого базового цвета. Копируйте HEX-коды одним нажатием.
Выбор цвета и генератор палитр
Выбирайте цвета, конвертируйте HEX/RGB/HSL, создавайте гармоничные палитры.