Выбор цвета из изображения — получение кодов цветов 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. Нет необходимости повторять настройку для каждого элемента, а извлечение палитры выполняется в вашем браузере; для загрузки сохраняется только готовая таблица.

Почти всегда причина одна из трёх. Файл превышает бесплатный лимит загрузки 11 МБ: Premium принимает до 50 МБ, а Pro — до 120 МБ. Либо инструмент не поддерживает этот формат — проверьте список на панели загрузки. Либо фактический формат не соответствует расширению: переименование не меняет содержимое, поэтому даже внешне корректное изображение может быть отклонено.

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

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

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