IT Market
🇷🇺RU🇬🇧EN
ВойтиРегистрация
Инструменты/Дизайн/Цвет/Извлечь палитру цветов из изображения онлайн
Image Color Analyzer Online

HEX, RGB and palette heatmap in browser.

Input

+
Drop image

PNG, JPG or WEBP up to 10 MB.

Click to browse
8
No image selected
Canvas processing. No upload.

Palette

Palette heatmap

Waiting for image
0 Colors
-- Top color
-- Sample
Palette will appear here.
Похожие инструменты → 🎨 Пипетка цвета онлайн — HEX, RGB, HSV, CMYK ☯️ Подбор контрастных цветов по WCAG онлайн 🛠️ Перевести RGB в HEX онлайн — конвертер цвета 🎨 RGB в HSL онлайн — тон, насыщенность, свет 🛠️ Base64 в изображение — декодер онлайн бесплатно 🛠️ Изображения в ZIP архив — упаковать онлайн 🛠️ Изображение в Base64 — кодировщик онлайн 🛠️ Изображения в PDF — объединить онлайн бесплатно # Конвертеры цвета

Коротко об инструменте

Извлечь палитру цветов из изображения онлайн

На вход идёт растровая картинка любого формата, который открывает браузер — JPG, PNG, WebP или скриншот. На выходе набор плашек с кодами HEX и RGB, отсортированных по площади оттенка в кадре. Разбор идёт во вкладке через canvas, файл никуда не отправляется. Пригодится, когда клиент прислал единственный JPEG логотипа без брендбука, а фирменные цвета нужны в CSS-переменных. Смотрите также: уточнить найденный оттенок вручную, проверить пары из палитры на читаемость, перевести найденные RGB значения в HEX.

Как пользоваться

  1. Нажмите «Change image» и выберите файл — поле принимает любое изображение (accept="image/*"), включая скриншоты и фотографии.
  2. Передвиньте ползунок «Colors»: по умолчанию он стоит на 8, минимум — 3 оттенка, максимум — 777 для подробного разбора градиентов.
  3. Нажмите «Analyze» и дождитесь, пока в блоке «Palette» появятся плашки с кодами цветов.
  4. Сравните доминирующие оттенки: первые в списке занимают наибольшую площадь картинки, хвост — это шум сжатия и полутона.
  5. Скопируйте нужные HEX или RGB значения и перенесите их в CSS-переменные, Figma или брендбук.
  6. Если оттенки слились в один, уменьшите число цветов до 4–6 и запустите разбор повторно.

Вопросы и ответы

Как узнать цвет на картинке в HEX без Photoshop?

Достаточно загрузить файл кнопкой «Change image» и нажать «Analyze». Инструмент рисует изображение на скрытом canvas, читает пиксели и группирует их в кластеры. Каждая плашка в блоке «Palette» — это готовый код в HEX и RGB, который можно скопировать прямо в CSS. Ни Photoshop, ни расширения браузера при этом не нужны.

Сколько цветов ставить на ползунке «Colors»?

Для брендовой палитры хватает 3–6: получаются фон, основной цвет и акцент. Значение 8, стоящее по умолчанию, удобно для интерфейсных референсов, где нужны ещё полутона границ и теней. Верхние сотни вплоть до 777 имеют смысл только на фотографиях с плавными градиентами — иначе вы получите список почти одинаковых оттенков.

Загружается ли изображение на сервер при анализе?

Нет. Файл читается через FileReader и разбирается на canvas в самой вкладке, сетевых запросов с содержимым картинки не делается. Поэтому можно безопасно анализировать макеты под NDA и внутренние скриншоты. Обратная сторона — на очень больших фотографиях разбор упирается в мощность вашего устройства.

Какой максимальный размер файла выдержит анализатор?

Жёсткого ограничения в коде нет, границу задаёт память вкладки. Фотографии с телефона на 12–24 мегапикселя обрабатываются нормально, а вот панорамы и сканы в 100+ мегапикселей на слабом ноутбуке могут подвесить страницу на несколько секунд. Если анализ долго не заканчивается, уменьшите картинку до ширины 1500–2000 пикселей.

Почему цвета в палитре не совпадают с оригиналом точь-в-точь?

Причин две. Первая — JPEG сжимает изображение с потерями, и соседние пиксели одного визуального цвета физически различаются. Вторая — алгоритм объединяет близкие оттенки в один кластер и показывает усреднённое значение. Чтобы получить точный пиксель, а не средний по области, используйте пипетку в Color Picker.

Работает ли анализатор с PNG с прозрачностью?

Да, PNG с альфа-каналом открывается, но прозрачные области трактуются как пиксели с нулевой непрозрачностью и могут попасть в выборку тёмным или белым фоном. Если в палитре появился неожиданный чёрный, обрежьте прозрачные поля заранее или подложите под логотип нужный фон.

Можно ли извлечь палитру с телефона?

Да, страница работает в мобильном Safari и Chrome: по нажатию на «Change image» открывается выбор между камерой и галереей. Учтите, что снимок с камеры весит больше макета, и разбор на 777 цветов на телефоне занимает заметно дольше, чем на десктопе.

Примеры

Логотип клиента без брендбука 
До: logo-final-v3.jpg, 1200×1200, только растровый файл
После: #FA551E, #101014, #F5F2EC — три плашки, ползунок «Colors» на 3
Референс для лендинга 
До: Скриншот интерфейса с градиентным фоном
После: 8 оттенков от #0B1E3A до #6FC3DF: фон, карточки, акцент кнопки