Выбор цвета из изображения — получение кодов цветов HEX и RGB

Загрузите любой JPG, PNG, WebP или GIF и щелкните в любом месте отображаемого изображения — точный пиксель под курсором будет выбран и отображен в HEX, RGB и HSL с копированием одним щелчком мыши для каждого формата. Полезно для подбора цвета бренда, выборки образца с фотографии или выделения акцентных тонов из дизайнерского макета.

Кликните по любому пикселю, и этот инструмент выбора цвета покажет его HEX-код (например, #FF6B35) вместе с RGB и HSL — те же HTML/CSS-коды цвета, которые вы вставляете прямо в таблицу стилей, дизайн-токен или HTML-атрибут. Нажмите «Копировать», чтобы получить hex-код в один клик.

Изображение уменьшается до 320 пикселей по длинной стороне, затем каждый пиксель распределяется по группам по старшим 4 битам каждого канала. Наиболее заполненные группы усредняются обратно до полного 8-битного цвета, сортируются по частоте и возвращаются в виде вашей палитры. Результат — обычно от 5 до 24 доминирующих цветов, визуально передающих суть изображения.

Да. Кнопки скачивания создают два формата: блок CSS-переменных, готовый к вставке в селектор :root (--color-1, --color-2…), и файл JSON с hex, компонентами RGB и процентной долей для каждого цвета. Оба формата без проблем встраиваются в дизайн-токены, конфиги Tailwind и библиотеки палитр.

Нет — выбор цвета и извлечение палитры происходят полностью в вашем браузере с помощью HTML canvas API. Изображение остаётся на вашем устройстве, что делает инструмент безопасным для невыпущенных фото товаров, черновых макетов и брендовых материалов под NDA.

Для работы над фирменным стилем оптимальны 5–8 цветов — этого достаточно, чтобы передать основную тему, не размывая акцентные оттенки. Для визуализации данных мы рекомендуем 10–16 цветов, чтобы хватало категориальных оттенков. Ползунок позволяет выбрать значение от 5 до 24.

Пиксели с альфа-каналом ниже 128 игнорируются, поэтому прозрачные фоны не засоряют палитру «фоновыми» цветами. Это делает пипетку цвета особенно удобной для вырезанных товаров, стикеров и изолированных объектов.

HEX (#RRGGBB) — самый компактный формат, который по умолчанию используют CSS, Figma и Sketch. RGB показывает три значения компонентов от 0 до 255 — удобно при программной работе с данными изображения. HSL (тон, насыщенность, светлота) интуитивно понятен для настройки цветов: сдвиньте тон, чтобы сменить цветовую гамму, измените светлоту для оттенков и затемнений.

Да. Он запускается в браузере и не требует учетной записи. Не нужно ничего устанавливать, и нет ограничений на количество проверяемых палитр.

Изображение не требуется. Палитра и цветовое колесо вверху работают самостоятельно — перетаскивайте квадрат насыщенности и яркости и ползунок оттенка или введите точное значение HEX, RGB или HSL. Загрузка изображения нужна только для того, чтобы взять цвет пипеткой с фото.

Выберите базовый цвет, и панель цветовых гармоний мгновенно построит комплементарные, аналоговые, триадные, раздельно-комплементарные, тетрадные и монохромные схемы на основе теории цветового круга. Нажмите на любой образец, чтобы скопировать его HEX-код.

В отдельном инструменте «Пипетка и цветовой круг» подберите свой цвет, и панель покажет его коэффициент контрастности относительно чисто-белого и чисто-чёрного вместе с оценкой WCAG — AAA, AA, AA Large или Fail. Используйте это перед окончательным выбором цвета текста или кнопки, чтобы он оставался читаемым и соответствовал рекомендациям по доступности WCAG 2.1.

Да. Отдельный инструмент Color Picker & Wheel показывает ближайший подходящий именованный CSS-цвет рядом с любым значением HEX, RGB или HSL, которое вы задали, что удобно для быстрого описания оттенка в брифе, тикете или дизайн-спецификации без догадок.

Нажмите «Random» в панели «Color Picker & Wheel», чтобы перейти к новому цвету, затем воспользуйтесь панелью «Color harmonies» под ней, чтобы увидеть комплементарные, аналоговые, триадные и другие согласованные палитры, построенные на основе этого цвета — быстрый способ найти отправную точку, когда вы разрабатываете с нуля, а не берёте цвета с готового изображения.

Используйте раскрывающийся список «Размер» над палитрой, чтобы выбрать 5, 8, 10, 16 или 24 доминирующих цвета — палитра пересчитывается мгновенно при изменении. Сочетайте небольшой размер вроде 5 для чистой фирменной палитры с пипеткой выбора цвета, чтобы захватить один-два точных акцентных оттенка, которые автоматическое извлечение могло бы усреднить.

Да — отдельная «Пипетка и цветовой круг» показывает коэффициент контрастности вашего текущего цвета относительно чисто белого и чисто чёрного прямо под образцом, с пометкой AAA, AA, AA Large или Fail согласно порогам WCAG (7:1, 4.5:1, 3:1). Используйте это, чтобы проверить, что сочетание текст/фон соответствует стандартам доступности, прежде чем зафиксировать цвет дизайна.

Выбор цвета и цветовой круг автоматически сопоставляют любой заданный вами цвет — через палитру, поле HEX или поля RGB/HSL — с ближайшим стандартным именем цвета CSS, показанным как «Ближайшее имя» рядом с образцом. Это быстрый способ описать цвет словами или найти его ближайший веб-безопасный эквивалент.

Да — каждый клик или касание по загруженному изображению добавляет новый образец в ваш список «Выбранные цвета», а не заменяет предыдущий, поэтому вы можете собрать собственный набор точных пиксельных цветов из разных частей фото. Удалите любой отдельный образец кнопкой ×, либо очистите весь список кнопкой «Очистить выбранное».

Да — кнопка «Случайно» (значок перемешивания) в «Пипетке и цветовом круге» одним кликом переходит к новой комбинации оттенка, насыщенности и яркости, что полезно для преодоления творческого ступора или изучения палитры, которую вы бы не ввели вручную. HEX, RGB, HSL и образцы гармонии ниже обновляются все вместе.

На сенсорном экране проведите пальцем по изображению, чтобы просматривать цвет под ним в живом плавающем образце, затем поднимите палец, чтобы добавить именно этот пиксель в список «Выбранные цвета» — отдельного подтверждающего касания не нужно. Тот же выпадающий список размера палитры и кнопки экспорта работают на мобильном точно так же.

Да. У цветового круга в верхней части страницы есть кнопка «Случайный», которая переходит к случайному цвету и сразу показывает его коды HEX, RGB и HSL, ближайший по названию цвет, коэффициенты контраста на белом и чёрном фоне, а также полные наборы гармоний — комплементарные, аналоговые, триадные, раздельно-комплементарные, тетрадные и монохромные. Это быстрый способ найти отправную точку для палитры.

Этот инструмент берёт цвета из загруженного изображения или встроенного цветового круга, а не считывает их напрямую с экрана. Самый быстрый способ заменить экранную пипетку: сделайте скриншот, перетащите его на страницу и кликните по нужному пикселю — вы получите те же коды HEX, RGB и HSL без установки расширений, а скриншот никогда не покинет ваш браузер.

Да — Pixoate поддерживает пакетную и массовую обработку. Переключитесь в пакетный режим, добавьте до 60 изображений в Premium или до 200 в Pro, задайте параметры один раз, и каждое изображение будет обработано с одинаковыми настройками перед загрузкой одной электронной таблицы — строки палитры для каждого изображения. Массовая обработка — это функция Premium; на выходе используется то же качество и настройки, что и в одиночном режиме.

Да — при массовой обработке вы настраиваете параметры один раз, и они применяются к каждому элементу в пакете — до 60 изображений в версии Premium или 200 в версии Pro. Нет необходимости повторять настройку для каждого элемента, а извлечение палитры выполняется в вашем браузере; для загрузки сохраняется только готовая таблица.

Почти всегда одно из трех. Размер файла превышает лимит бесплатной загрузки в 20 МБ — Premium занимает 50 МБ, а Pro — 120 МБ. Этот инструмент не поддерживает этот формат, поэтому проверьте список, показанный на панели загрузки. Или файл на самом деле не соответствует формату, указанному в его названии: переименование файла не меняет того, что находится внутри него, и это причина, по которой отклоняется правильно выглядящее изображение.

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

Color Picker supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Premium supports batches of up to 60 files, with the applicable plan limits shown before processing.

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