Ключевые возможности анализатора цветов изображений
- Извлечение доминирующей цветовой палитры со значениями HEX/ARGB
- Выборка цвета в реальном времени при наведении мыши
- Точный выбор цвета по клику
- Отображение процентного распределения цветов
- Интерактивные панели предпросмотра цвета
Как использовать
Добавьте изображение
Нажмите на область загрузки или перетащите изображение в неё. Подойдёт любой формат, который отображает браузер: PNG, JPEG, GIF, WebP, SVG.
Возьмите пиксель или прочитайте палитру
Наведите указатель на изображение, чтобы увидеть цвет под ним, и нажмите, чтобы закрепить его. Справа одновременно появляется список преобладающих цветов.
Нажмите на любое значение цвета, чтобы скопировать
И закреплённый цвет, и строки палитры копируют своё значение HEX или ARGB в буфер обмена по нажатию.
Практические сценарии использования
- Дизайнеры создают цветовые схемы
- Веб-разработчики подбирают фирменные цвета
- Цифровые художники анализируют референсные изображения
- Преподаватели, обучающие теории цвета
- Контроль качества в продуктовой фотографии
Технические характеристики
- Поддерживаемые форматы: JPG/PNG/WEBP/GIF/SVG
- Обработка в браузере
- Высокопроизводительный алгоритм кластеризации цветов
- Анализ в цветовом пространстве CIE Lab
- Кроссплатформенная совместимость
Безопасность и конфиденциальность
- 100% обработка на стороне клиента
- Изображения не загружаются на сервер
- Автоматическая очистка памяти
- Отсутствие отслеживающих cookies
- Соответствие GDPR
Доступность
- Регистрация не требуется
- Бесплатно для коммерческого использования
- Интерфейс, оптимизированный для мобильных устройств
- Соответствие стандартам цветового контраста
Частые вопросы
- Изображение загружается на сервер?
- Нет. Файл читается встроенным FileReader браузера и рисуется на локальном canvas. Запросы не отправляются, и ничего нигде не сохраняется.
- Почему выбранный цвет немного отличается от того, что я вижу в редакторе изображений?
- Предпросмотр здесь уменьшается до 500 пикселей по длинной стороне и перекодируется, а плавное масштабирование смешивает соседние пиксели. Поэтому цвет на резкой границе может читаться как смесь, а не как тот самый пиксель исходного файла. На однотонных участках значения совпадают.
- Как определяется, какие цвета преобладающие?
- Изображение уменьшается до 200 пикселей и разбивается сеткой на пробы, после чего каждый цвет сравнивается с остальными по цветовому различию CIE76. Оттенки, отличающиеся менее чем на 10, объединяются в один усреднённый цвет. Чтобы попасть в список, цвет должен занимать не менее 1% отобранных пикселей; список ограничен 18 строками, от наибольшего к наименьшему.
- Что означают два значения рядом с каждым цветом?
- HEX — обычный шестизначный веб-цвет. В ARGB альфа-канал записывается первым: ARGB(255, 120, 40, 90) означает полностью непрозрачный красный 120, зелёный 40, синий 90. Для непрозрачного изображения альфа всегда равна 255, а пиксели с прозрачностью более половины при построении палитры пропускаются.