Извлечение цветов из изображения — доминирующий цвет, палитра из 8 цветов и значения HEX
Выберите плакат, скриншот или фотографию и получите доминирующий цвет и палитру из восьми цветов, рассчитанные в браузере методом медианного разреза. Образцы показывают HEX и копируются по клику. Нет настройки количества цветов, вывода HSL или CMYK и экспорта CSS-переменных.
Что этот инструмент извлечения цветов выдаёт — и чего не делает
Доминирующий цвет и палитра из 8 цветов
При каждой загрузке выполняется квантование медианным разрезом: самый крупный кластер цвета становится доминирующим, а палитра всегда состоит из восьми образцов. Изображение показывается только как превью в области 16:9 с contain, без операций на уровне пикселей.
Нет настройки количества цветов и формата
Размер палитры жёстко задан как 8 (доминирующий цвет берётся из отдельного квантования по 5 цветам), внутри используется RGB, а показывается только HEX в нижнем регистре. Нет текстового вывода HSL, CMYK или RGB и экспорта CSS-переменных.
Клик по образцу копирует HEX
Каждый круглый образец копирует своё значение HEX в буфер обмена и показывает уведомление. Само изображение не кликабельно, поэтому нет пипетки и возможности взять цвет конкретного пикселя.
Обработка в canvas, но только локальные файлы
Выбранное изображение рисуется на canvas и читается через getImageData — всё в браузере. Поля для URL изображения нет, поэтому загрязнение canvas из-за cross-origin невозможно: анализируется только выбранный файл.
Выборка пропускает почти белые и прозрачные пиксели
Берётся каждый десятый пиксель; пиксели с alpha ниже 125 и почти белые (все три канала выше 250) игнорируются. Поэтому белый фон и прозрачные области никогда не доминируют в результате.
Вопросы об извлечении цветов из изображения
Как рассчитываются цвета?
С помощью квантования медианным разрезом (MMCQ) из ColorThief. Доминирующий цвет — первый кластер квантования по 5 цветам, палитра — результат квантования по 8 цветам. Quality по умолчанию 10, то есть выбирается каждый десятый пиксель.
Можно ли изменить количество цветов?
Нет. Восемь образцов заданы жёстко, без ползунка и поля ввода, а доминирующий цвет берётся из отдельного квантования по 5 цветам. При каждом новом файле палитра пересчитывается и заменяется.
Какие форматы цвета можно получить?
Только HEX в нижнем регистре: показывается на каждом образце и копируется по клику. Нет значений RGB, HSL или CMYK, нет CSS-переменных и нет экспорта в PNG или текст.
Есть ли пипетка или выбор одного пикселя?
Нет. Изображение служит только превью; клик по образцу копирует его HEX. Выбора на уровне пикселей и возможности взять цвет в конкретной точке фотографии нет.
Изображение загружается на сервер? Обрабатывается в canvas?
Всё происходит в локальном canvas, ничего не отправляется. Файл загружается через object URL, показывается в фиксированной области превью 16:9, а затем рисуется в исходном размере для анализа.
Загрязнит ли canvas изображение с другого домена?
Страница принимает только локальные файлы: нет поля URL и вызова getColorFromUrl, поэтому загрязнение CORS невозможно. Для картинки из интернета сначала скачайте её, затем выберите файл.
Почему белый цвет и прозрачность игнорируются и что с очень большими изображениями?
Пиксели с alpha ниже 125 и почти белые (все каналы выше 250) пропускаются. Очень большие изображения рисуются в исходном размере и читаются целиком, поэтому могут работать медленно и занимать много памяти; масштабирования и ограничения размера нет.
