Пипетка для изображения — узнайте HEX-код любого пикселя

Загрузите изображение, наведите на любой пиксель и считайте его точные значения HEX, RGB и HSL. Лупа с пиксельной сеткой показывает, что под перекрестием, стрелки на клавиатуре сдвигают пробу на пиксель, и ничего не покидает браузер.

Перетащите изображения сюда или нажмите для загрузки

Поддерживает JPG, PNG, GIF, WEBP, SVG

Зачем брать один цвет с изображения

Большинство вопросов о цвете касается одной конкретной точки, а не изображения целиком. Вам присылают скриншот утверждённого макета, и нужна точная заливка кнопки, чтобы воспроизвести её в CSS. Клиент прислал JPG со своим логотипом, и без фирменного красного вы ничего вокруг не построите. Вы подгоняете серию на графике под цвет заголовка в презентации. Вы проверяете, действительно ли два образца, выглядящих на фото одинаково, имеют одно значение — или один темнее на пару шагов. Во всех этих случаях автоматическая палитра даст неверный ответ: она вернёт шесть цветов, покрывающих наибольшую площадь, а нужный вам цвет вполне может оказаться акцентом в 40 пикселей, который ни один алгоритм кластеризации не поднимет наверх. Возможность ткнуть в пиксель — и есть вся работа. Это ещё и самый быстрый путь, когда исходного файла уже нет. Дизайн-системы расходятся с реальностью, исходники теряются, и сведённый PNG-экспорт часто оказывается единственным уцелевшим свидетельством того, каким был цвет. Считать его — секунда, и никакого дизайнерского софта устанавливать не нужно. То же касается работы, где дизайнера не было вовсе: фотограф берёт пробу тона кожи перед цветокоррекцией, разработчик копирует цвет фона со скриншота из баг-репорта, преподаватель вытягивает цвета из картины для рабочего листа. А поскольку всё работает локально, невыпущенные макеты и внутренние скриншоты не покидают вашу машину.

Восстановить точную заливку кнопки, значка или элемента логотипа со сведённого скриншота, когда исходника уже нет

Указать именно тот пиксель, который вам нужен, вместо того чтобы принимать цвета, признанные доминирующими автоматической палитрой

Попасть в однопиксельную границу или тонкий сглаженный край с помощью сдвига стрелками и лупы 13 на 13 пикселей

Скопировать один и тот же пиксель как HEX, RGB или HSL, а при наличии прозрачности — как HEXA и RGBA

Как взять цвет с изображения

Четыре шага, без регистрации и установки. Файлы читает сама страница — на сервер ничего не загружается.

Перетащите изображение в область загрузки, выберите файл или вставьте картинку прямо из буфера обмена. Подходят JPG, PNG, WebP, GIF и SVG.

Наведите указатель на изображение. Лупа показывает пиксельную сетку вокруг перекрестия, а панель обновляется в реальном времени. На сенсорном экране нажмите и ведите — лупа держится над пальцем, поэтому не перекрывается.

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

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

Часто задаваемые вопросы

Значение могут разводить три вещи. Во-первых, при отрисовке на холст большинство браузеров игнорирует встроенный в изображение ICC-профиль, поэтому фотография с меткой Display P3 или Adobe RGB читается так, будто её числа заданы в sRGB, — а редактор с управлением цветом вроде Photoshop применит профиль и покажет другое. Во-вторых, ваш монитор отображает sRGB через собственный охват и калибровку, поэтому одно и то же значение выглядит по-разному на двух экранах. В-третьих, сжатие JPG с потерями реально меняет значения пикселей у краёв, поэтому область, кажущаяся однородной, может содержать несколько чуть разных цветов. Здесь показано то число, которое действительно записано в файле, — именно его воспроизведут CSS и код.

Холст возвращает цвет без предумножения, то есть RGB и альфа хранятся отдельно. Пиксель, заданный как белый с 50-процентной непрозрачностью поверх пустоты, вернётся как rgb(255, 255, 255) с альфой 128 — значение, которого нигде на экране не встретить. Всякий раз, когда альфа меньше 255, инструмент показывает сырые значения, 8-значные формы HEXA и RGBA, а дополнительно — во что этот пиксель превращается на белом фоне, и обычно именно это число вам и нужно.

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

Нет. Файл читает сама страница, декодирует его в холст в вашей вкладке и там же берёт пробу. Копия на сервер не отправляется, ничего не сохраняется, а список недавних цветов живёт только в открытой вкладке и исчезает при её закрытии. Это важно для невыпущенных макетов, внутренних дашбордов и всего прочего, что вы не стали бы вставлять в случайную веб-форму.

Нажмите и ведите вместо касания. Лупа рисуется над точкой касания, а не под ней, поэтому пиксельную сетку видно, пока палец ещё на экране, а проба следует за движением. Для последнего пикселя-двух используйте экранный блок стрелок: каждое нажатие сдвигает пробу ровно на один исходный пиксель, а пальцем так не сделать. Поднимите палец или нажмите кнопку с галочкой, чтобы сохранить цвет.

Да. Браузеры ограничивают суммарную площадь холста примерно 16,7 миллиона пикселей — около 4096 на 4096, — поэтому файл на 24 или 50 мегапикселей нельзя показать одним холстом в полном разрешении, и предпросмотр рисуется меньше с соответствующей пометкой. Проба через этот предпросмотр не идёт. Каждое считывание перерисовывает лишь небольшое окно вокруг указателя, взятое из декодированного файла один к одному, поэтому вы получаете именно тот пиксель, который есть в файле. Обрезать изображение заранее не нужно, и однопиксельная деталь на 50-мегапиксельном фото читается ровно такой, какой была задана, а не размывается в соседей.

Да, но с одной оговоркой для каждого. Анимированный GIF рисуется только первым кадром, поэтому цвета, появляющиеся дальше по анимации, недоступны — сначала экспортируйте нужный кадр. SVG растеризуется перед пробой, поэтому вы получаете цвет отрисованного результата со всей применённой к фигуре прозрачностью, фильтрами и градиентами, а не сырую заливку, записанную в разметке. Если SVG не объявляет собственного размера, он растеризуется шириной 1024 пикселя.

Все три описывают один и тот же пиксель, поэтому вопрос лишь в том, куда вы вставляете. HEX — компактная форма, которую ждёт большинство дизайн-инструментов и таблиц стилей. RGB удобнее читать, когда нужно подвинуть один канал или численно сравнить два цвета. HSL стоит копировать, когда нужен вариант, а не точный цвет: оставьте тон и насыщенность, поменяйте светлоту — и получите согласованный оттенок посветлее или потемнее. Если пиксель несёт прозрачность, дополнительно появляются 8-значный HEXA и значение RGBA.

Другие инструменты для изображений

Откройте другие мощные инструменты для редактирования изображений

Зачем брать один цвет с изображения

Как взять цвет с изображения

Часто задаваемые вопросы

Другие инструменты для изображений

Сжать Изображение

Изменить Размер

Обрезать Изображение

Конвертировать Формат

Фоторедактор

Повернуть Изображение

Отразить Изображение

Добавить Водяной Знак

Добавить Рамку

Закругленные Углы

Фильтры

Размыть Лицо

Мозаика

Удалить Фон

Улучшить Изображение

Добавить Текст

Коллаж

HTML в Изображение

GIF в Последовательность

Удалить пустые поля

Пакетное переименование изображений

Круговая обрезка

Чёрно-белое

Разделить изображение

Объединить изображения

Изменить DPI

Изображение в Base64

Изображения в PDF

Конвертер HEIC в JPG

Удаление EXIF

Генератор фавиконок

Цветовая палитра

Base64 в изображение

HEIC в PNG

Текст за изображением

Создание подписи

Удаление фона подписи

Прозрачный фон

Генератор мемов

Увеличение изображений

PDF в JPG

PDF в PNG

Фото на документы