Определить цвет по фото с точностью до пикселя

Это инструмент, который читает настоящие значения пикселей из картинки и отдаёт вам их коды. Вы показываете точку на фотографии, скриншоте или логотипе, а он сообщает, что этот пиксель — #F5A17D, или rgb(245, 161, 125), или то же самое в любом другом нужном вам формате. В этом вся его работа. Это не фильтр и не редактор: с вашим изображением ничего не происходит. Это способ достать цвет из картинки и положить его в таблицу стилей, в файл макета или в заказ на краску.

Браузер декодирует изображение в сетку пикселей, и у каждого пикселя есть красное, зелёное и синее значения от 0 до 255. Этот инструмент рисует декодированное изображение на HTML-холсте в полном исходном размере и считывает пиксель под курсором. Эти три числа превращаются во все остальные форматы: HEX — те же числа в шестнадцатеричной системе, а HSL и OKLCH описывают тот же цвет через угол и светлоту. Приближение меняет только то, что видите вы. Холст, с которого идёт чтение, не масштабируется никогда, поэтому чтение при 10-кратном увеличении — это то же самое чтение, что и при вписанном масштабе.

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

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

Любые, которые понимает ваш браузер, а это на практике JPEG, PNG, WebP, AVIF, GIF и BMP, плюс файлы SVG, у которых заданы собственные ширина и высота. Ограничение — 40 МБ на файл; ограничения на размеры в пикселях нет. Файл можно перетащить, выбрать на диске, вставить скриншот по Ctrl + V или вставить ссылку на картинку в вебе. Снимки с телефона открываются в правильной ориентации, потому что EXIF учитывается при декодировании, а не игнорируется.

Да, причём двумя разными способами. Каждый щелчок ставит метку, и их количество ничем не ограничено: можно пройти по изображению, собирая цвета, переименовать каждый, переставить их и выгрузить весь набор одним действием. Отдельно вкладка палитры описывает изображение целиком: оно уменьшается до 160 пикселей по длинной стороне, делится проходом медианного сечения, а затем уточняется взвешенной кластеризацией k-means в CIE LAB, чтобы группы соответствовали тому, как цвет на самом деле воспринимает человек. Каждый из восьми образцов сообщает свою долю изображения.

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

Да, в Chrome, Edge и других браузерах на Chromium. Кнопка «Снять с экрана» использует встроенный в браузер интерфейс EyeDropper, который умеет брать любой пиксель вашего дисплея, включая другое окно, кадр видео или PDF. Firefox и Safari этот интерфейс не реализовали, поэтому там кнопки нет. В этих браузерах сделайте скриншот и вставьте его по Ctrl + V. Снятие цвета со скриншота в PNG обычно даёт то же значение, что и с экрана.

Девять для каждого снятого цвета, и все они обновляются в реальном времени: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH и ближайшее название цвета CSS. Название подбирается по CIEDE2000, а не по прямому расстоянию в RGB, поэтому попадает в то имя, которое действительно выглядит ближайшим. HEX и RGB вы будете вставлять чаще всего, HSL и HSV удобнее, когда нужен тот же цвет чуть светлее, а OKLCH перцептивно равномерно, поэтому шкалы оттенков и гармонии здесь считаются в нём, а не в HSL. А палитра цветов на соседней странице раскладывает один цвет на 34 кода, добавляя HWB, CIELUV, OKLab, CIE XYZ и линейный sRGB.

Само чтение точное: инструмент возвращает байтовые значения декодированного изображения, без интерполяции и без округления. Точность теряется в самом изображении. В JPEG, сохранённом с качеством 95, пиксель внутри однотонной области отстоит от оригинала на 0,37 дельта-E (дельта-E измеряет видимую разницу цвета; меньше 1 её не видно). Пиксель на границе отклоняется уже на 6,91, а точным цвет снова становится лишь примерно с 3-го пикселя от резкой границы. Сглаживание даёт похожий ущерб и без сжатия: на краю тестовой окружности появляются цвета, которых нет ни в фигуре, ни в фоне, — всего 77. Измерено 25 августа 2026 г. в Chromium 151.0.7922.34.

Да. Любое отдельное значение копируется одним щелчком, а на вкладке экспорта можно выгрузить целый набор сразу: ваши метки, извлечённую палитру изображения, гармонии или полную шкалу оттенков от 50 до 950. Доступно шесть форматов: пользовательские свойства CSS, блок @theme для Tailwind v4, переменные SCSS вместе с картой, JSON, простой список HEX-кодов и лист образцов SVG с подписями. Каждый из них можно скопировать в буфер обмена или скачать файлом. Экспорта в PNG и в палитры Adobe нет; лист SVG — самое близкое к картинке палитры, которой можно поделиться.

Нет. На этом сайте нет точки приёма файлов: браузер открывает файл, а инструмент читает пиксели с холста в той же вкладке. Учётной записи и аналитики нет. Чтобы убедиться, откройте панель «Сеть» в браузере и снимите несколько цветов: ни одного запроса не появится. Сквозной тест проекта делает то же самое и падает, если какой-либо запрос уходит со страницы. Единственное исключение — вставка ссылки на изображение: тогда браузер загружает его с сервера, на котором оно размещено.

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

Та, которая отвечает на ваш настоящий вопрос, и проверить стоит всего четыре вещи. Отправляет ли она файл на сервер или читает его в вашем браузере? Даёт ли что-нибудь, кроме HEX-кода, — палитру, проверку контраста, шкалу оттенков? Можно ли расширить область выборки? Без этого с шумной фотографией не поработать. И можно ли экспортировать результат в формате, который примут ваши инструменты? Эта пипетка умеет всё перечисленное. Её ограничения: экранная пипетка работает только в браузерах на Chromium, а экспорта в палитры Adobe и в PNG нет.

Вставьте скриншот прямо на страницу сочетанием Ctrl + V, наведите лупу на нужный пиксель и щёлкните: HEX-код появится в панели рядом, а щелчок по строке его скопирует. Скриншот в PNG обычно сохраняется без потерь, поэтому цвет совпадает с тем, что было на экране. Если скриншот пересохранили в JPEG, снимайте цвет в середине однотонной области, подальше от краёв.

Откройте изображение и перейдите на вкладку «Палитра изображения»: инструмент сам найдёт восемь преобладающих цветов и покажет долю каждого в процентах. Нужны конкретные цвета — щёлкайте по ним, каждый щелчок добавляет метку на вкладку «Мои цвета». Затем на вкладке «Экспорт» выгрузите палитру как переменные CSS, блок Tailwind, SCSS, JSON или лист образцов SVG.

Да. Рядом с образцом снятого цвета пипетка показывает ближайшее название цвета из CSS, например orchid или lightseagreen, и описание словами вроде «Лазурный приглушённый». Название подбирается по формуле CIEDE2000, то есть так, как различает цвета глаз, а не по простому расстоянию в RGB. Знак «≈» перед названием означает, что совпадение неточное.

Не напрямую. По запросу «color picker» Google показывает свой виджет выбора цвета, но он не читает пиксели вашей картинки, а Google Объектив и поиск по картинке в Яндексе ищут похожие изображения и товары, а не точные коды. Чтобы узнать HEX или RGB конкретного пикселя, откройте изображение в пипетке и щёлкните по нужной точке.

Нет. Пипетка работает прямо на странице в любом современном браузере, устанавливать ничего не нужно. В Chrome, Edge и других браузерах на Chromium кнопка «Снять с экрана» берёт цвет из любого окна, видео или PDF через встроенный EyeDropper API. В Firefox и Safari сделайте скриншот и вставьте его сочетанием Ctrl + V.