Руководство

Как узнать код цвета на картинке с помощью пипетки

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

Md. Delwar Hossen · измерения от 25 августа 2026 г. Обновлено 15 ноября 2026 г.

Лупа над фотографией-примером: увеличенная сетка пикселей вокруг курсора, под ней HEX-код центрального пикселя.

Три шага и одна вещь, которую стоит понимать

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

Внутри вашей вкладки браузера

Ваше изображение
Перетащено, вставлено, выбрано среди ваших файлов или получено по ссылке.
Декодировано один раз
createImageBitmap с учётом ориентации EXIF — чтобы снимок с телефона стоял прямо.
Исходный холст
Держится в естественном разрешении изображения и не масштабируется никогда. Каждое чтение цвета идёт отсюда.

Холст отображения

то, что вы видите

Рисуется через преобразование приближения и сдвига, со сглаживанием, отключённым после 2×, чтобы были видны отдельные пиксели. С него не снимают ничего и никогда.

Считывание

то, что вы получаете

Читает исходный холст в пикселе под курсором, усредняя квадрат, выбранный в регуляторе выборки.

Ваше изображение вызывает сетевой запрос, только если вы вставили ссылку на него. Перетащенный или вставленный файл декодируется в памяти и никуда не отправляется. Чтобы убедиться, откройте в браузере панель «Сеть», пока снимаете цвета: ни одного запроса не появится.

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

Пять способов открыть изображение и подводные камни каждого

Все они кончаются в одном месте. Различия — в том, что может пойти не так.

Перетащить
Перетащите файл в любое место пипетки. Пока курсор над ней, зона приёма подсвечивается.
Второе перетащенное изображение заменяет первое и снимает все ваши метки.
Вставить
Скриншот или изображение, скопированное откуда угодно. Работает из любой части страницы.
Не срабатывает, пока курсор стоит в текстовом поле, чтобы вставка ссылки в поле адреса делала ровно одно действие.
Выбрать на диске
Обычное окно выбора файла, отфильтрованное по изображениям.
На телефоне здесь живёт галерея. Большинство мобильных окон выбора предлагает и саму камеру как источник.
Указать ссылку
Вставьте ссылку на изображение — оно будет получено и декодировано в вашем браузере.
Работает, только если хост разрешает другим сайтам читать свои изображения. Многие не разрешают. Если отказал — скачайте файл и перетащите его.
Взять пример
Фотография «Powder at sunset», чтобы попробовать всё до того, как доверять инструменту свой файл.
Сетки пикселей в разделе о лупе ниже взяты с этой фотографии.

Макс. размер файла: 40 МБ
Максимальные размеры: Без ограничений
Форматы: Всё, что понимает ваш браузер
Ориентация снимка: EXIF учитывается

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

Лупа и тот пиксель, который вы имели в виду

Наведение увеличивает тринадцать на тринадцать пикселей вокруг курсора. Это окно не украшение: при обычном масштабе один пиксель куда мельче кончика курсора, и без лупы вы просто гадаете.

Участок

Пиксель 435, 204 фотографии-примера, увеличенный примерно в 20 раз.

Выборка

#E79983

Один-единственный пиксель под курсором.

Цена промаха на один пиксель: 12,14
Усреднённые выборки сходятся в пределах: 11,37

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

Оба числа — расстояния CIEDE2000. Меньше примерно 1 — глаз не различает цвета вовсе, больше 10 — это уже разные цвета.

Как читать три участка

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

Резкая граница. Промах на один пиксель дорог, и усреднённые выборки расходятся между собой. Это расхождение и есть признак: внутри окна проходит граница. Оставайтесь на одном пикселе, приблизьте и отойдите от стыка.
Мелкая фактура. Промах на пиксель так же дорог, но усреднённые выборки все попадают в одну точку. Границы, через которую пришлось бы усреднять, нет, — значит, выборку можно расширить.
Спокойная область. Промах на пиксель не стоит ничего, и все размеры выборки согласны. Берите самый узкий и идите дальше.

Насколько выборка отклоняется от реального цвета

Снятий в случайных точках шумной области: 200. Истинное среднее — #10A99B. Чем ниже, тем ближе.

1 px

6,45

3 × 3

2,07

5 × 5

1,16

11 × 11

0,57

Переход от 1 px к 11 × 11 снижает ошибку с 6,45 до 0,57 — от явно неверного цвета до такого, который никакой глаз не отделит от правильного. Работает это только там, где пиксели вокруг курсора принадлежат одному и тому же; через границу то же усреднение работает против вас.

Что делает приближение

Изображение меньше сцены увеличивается до её размера, но не более чем в восемь раз, — чтобы крошечный favicon не заполнил экран четырьмя цветными квадратами.
Дойти можно до 6400 процентов. При увеличении больше 2× сглаживание отключается, и вы видите настоящие границы пикселей, а не мягкий градиент.
Колесо приближает вокруг курсора, поэтому пиксель под курсором под ним и остаётся.
При перемещении на экране всегда остаётся хотя бы четверть изображения, так что потерять его за краем невозможно.

Измерено в настоящем браузере

Почему снятый цвет — не тот, который был нужен

Цвет успевают испортить три вещи ещё до вашего щелчка. Ни одна из них не вина пипетки, всех трёх можно избежать, и все три измеримы, поэтому вместо описания они здесь измерены.

Повышение качества JPEG не спасает границу

Рисунок из плоских заливок фирменными цветами, сохранённый на пяти уровнях качества и прочитанный обратно. Столбцы — среднее расхождение CIEDE2000 с оригиналом по пикселям внутри заливки (51 362) и на границе (5 019).

Внутри заливки
На границе

q95

0,37

6,91

q85

0,6

7,28

q75

0,77

7,58

q60

0,98

8,2

q40

1,2

8,98

Даже при самом высоком качестве в этом тесте пиксель на границе отклоняется уже на 6,91, а пиксель внутри заливки — всего на 0,37, и такой разницы не видит никто. Снижение качества до q40 меняет оба числа гораздо меньше, чем шаг в сторону от границы. Место щелчка важнее, чем настройка качества.

Насколько граница пачкает соседа

Две заливки, встречающиеся по резкой границе, сохранены с качеством q90 и прочитаны по одному пикселю в сторону от стыка.

19,04

4,95

0,76

1,53

0,76

0,36

1,41

0,3

1,1

пикселей от границы

Первый пиксель за стыком отличается от положенного цвета на 19,04. Его значение — #648187, а такого цвета нет ни в одной половине изображения. Начиная с 3-го пикселя отклонение опускается ниже порога, за которым различие заметно с первого взгляда. Тот же файл с качеством q60 дал тот же результат, так что повышение качества здесь тоже не помогает.

Даже в файле без потерь каждая граница выдумана

Окружность, нарисованная на фоне, вообще без всякого сжатия.

#24409A

Фигура

то, что вы хотели снять

#7A736A

Её край

на 34,96 от фигуры

#FBBF24

Фон

второй настоящий цвет

Чтобы кривая выглядела гладкой, движок отрисовки смешивает фигуру с фоном вдоль всего её контура. Число различных цветов на краю одной этой окружности — 77, и ни одного из них нет в рисунке. Щёлкните в видимую середину края — и получите #7A736A: цвет, который никто не выбирал, отличающийся на 34,96 от того, в который вы целились. Ни один формат файла этого не предотвращает: решение — приблизить настолько, чтобы стала видна сетка пикселей, и щёлкнуть внутри фигуры.

Что с этим делать

Просите файл без потерь. Когда цвет должен быть точным, в PNG или SVG нет артефактов сжатия, которые можно случайно снять.
Щёлкайте в середину предметов. Не по краю логотипа, не по контуру буквы, не по ободку кнопки. Несколько пикселей внутрь — это и есть разница между настоящим цветом и выдуманным.
Приближайте до щелчка. При увеличении больше 2× видна сетка пикселей, и гадать, где проходит граница, больше не нужно.
Подбирайте выборку под поверхность. Один пиксель на ровном цвете и у границ, шире — на шуме и фактуре.

Как получены эти числа

Каждая цифра на этой странице приходит из scripts/measure-color-drift.mjs, который выполняется в Chromium 151.0.7922.34. Последний раз его запускали 25 августа 2026 г.. Кодирование и декодирование JPEG — собственные, браузерные, поэтому результаты показывают, что делает настоящий браузер. Каждое расхождение — значение CIEDE2000, посчитанное той же функцией, которой пользуется инструмент. Тестовые изображения скрипт рисует сам; сетки пикселей взяты из приложенной фотографии-примера.

Клавиатура и жесты

Стрелки — самый надёжный способ попасть в один конкретный пиксель. Щёлкните по изображению один раз, чтобы передать ему фокус, и клавиши ниже заработают.

На изображении

Стрелки: Сместить курсор на один пиксель
ShiftСтрелки: Сместить на десять пикселей
Enter: Закрепить цвет под курсором
Пробел: Удерживать и тянуть, чтобы двигать
+: Приблизить
-: Отдалить
0: Вписать изображение целиком

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

Указатель и касания

Щелчок: Снять цвет и закрепить его
Колесо: Приближение вокруг указателя
Средняя кнопка: Двигать изображение, не удерживая пробел
Один палец: Тянуть — двигать, касание — снять
Два пальца: Щипок приближает

Щелчок, съехавший больше чем на четыре пикселя, считается перетаскиванием и не снимает ничего, поэтому чуть дрогнувшая рука никогда не поставит метку, которой вы не хотели.

Одно сочетание работает на всей странице, а не только на изображении: Ctrl + V открывает изображение из буфера обмена или загружает картинку по скопированной ссылке. Пока вы печатаете в текстовом поле, сочетание не срабатывает.

От одного пикселя к палитре

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

Палитра изображения

Цвета, из которых состоит фотография, с долей пикселей у каждого. Изображение уменьшается до 160 пикселей по длинной стороне, делится медианным сечением, а затем уточняется взвешенной кластеризацией k-means в CIE LAB, поэтому группы следуют тому, как цвет видит человек.

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

Мои цвета

Каждый щелчок оставляет на изображении пронумерованную метку. Их можно переименовать, переставить, лишние убрать. В каком порядке вы их оставите, в таком они и выйдут при экспорте, а имена станут именами переменных.

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

Гармонии

Шесть схем, построенных поворотом тона вашего цвета. Поворот происходит в OKLCH, а не в HSL, и это важнее, чем звучит: при повороте в HSL жёлтые выходят грязными, а синие — крикливыми, потому что равные шаги в HSL не равны для глаза.

Возьмите что-нибудь почти серое — и все схемы схлопнутся в один оттенок. Панель прямо об этом скажет, а не сделает вид, что всё в порядке.

Оттенки и шкалы

Светлые к белому, тёмные к чёрному и приглушённые к серому, по десять шагов каждый. Четвёртый вариант — тот, который нужен интерфейсу: шкала от 50 до 950 на фиксированных перцептивных светлотах, то есть ровно та форма, которую ждёт дизайн-система.

Посмотреть все вариации цвета на странице цвета, где тем же шкалам отведено больше места.

Наведение обновляет образец и все девять форматов цвета в реальном времени; гармонии и шкалы ждут настоящего щелчка, чтобы не мелькать тысячей значений, пока вы двигаете мышь. Чтобы поработать с цветом дальше (34 формата, контраст, дальтонизм, график охвата), вставьте его в палитру цветов.

Как экспортировать цвета

Всё, что вы видите, можно экспортировать. Выберите, что выгружать и в какой форме.

Панель экспорта: три выбранных цвета в виде переменных CSS, с кнопками «Копировать» и «Скачать».

Что выгружать

Мои цвета
Поставленные вами метки, в вашем порядке и с вашими именами.
Палитра изображения
Преобладающие цвета, найденные алгоритмом.
Текущая гармония
Все цвета всех шести схем.
Текущая шкала
Та шкала, что у вас открыта.

В какой форме

Переменные CSS: Пользовательские свойства на :root
Tailwind v4: Блок @theme — вставьте в свой CSS
SCSS: Переменные и карта $palette
JSON: Все обозначения для каждого образца
Просто HEX: По одному коду в строке
Образцы SVG: Лист образцов с подписями

Скопируйте или скачайте. Экспорта в картинку нет — ближе всего к нему лист образцов SVG, и он остаётся редактируемым.

Ссылка и есть цвет

Каждый принятый цвет записывается в адресную строку. Сохраните ссылку в закладках, отправьте кому-нибудь или вставьте в задачу — она откроется ровно на этом цвете. Больше ничего из вашего сеанса по ссылке не передаётся.

Недавние цвета

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

Четыре задачи от начала до конца

Четыре типичные задачи с полным маршрутом через оба инструмента.

Подобрать фирменный цвет по логотипу

1Возьмите PNG или SVG, если он есть. У логотипа в JPEG края почти всегда испорчены.
2Приблизьте так, чтобы стала видна сетка пикселей, и отойдите на несколько пикселей внутрь фигуры, подальше от контура.
3Держите выборку на 1 px. Цвет там и так ровный, и усреднение может только затащить в него что-то лишнее.
4Снимите цвет ещё раз в нескольких пикселях рядом. Если оба раза получился один и тот же HEX, вы на однотонной заливке и значению можно доверять.

Перевести его во все остальные форматы

Собрать палитру интерфейса по фотографии

1Откройте снимок и посмотрите вкладку палитры изображения. Это те цвета, из которых картинка действительно сделана, с долей пикселей у каждого.
2Щёлкните по тому, на котором собираетесь строить. Он станет текущим цветом.
3Откройте «Оттенки и шкалы» и переключитесь на шкалу 50–950: она построена в OKLCH, поэтому шаги выглядят равномерными, а не просто равномерно пронумерованными.
4Выгрузите шкалу как Tailwind v4 и вставьте блок @theme в свою таблицу стилей.

Посмотреть, как строится шкала

Проверить текст на скриншоте

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

Открыть проверку контраста

Убедиться, что цвет статуса ещё работает

1Возьмите цвет, которым обозначаете ошибку, предупреждение или успех.
2Прогоните его через просмотр при дальтонизме и увидите его так, как видят при четырёх распространённых нарушениях.
3Посмотрите полосу различимости для того типа, который вас беспокоит. Ниже примерно 10 цвет слишком близок к дополнительному цвету, чтобы нести смысл в одиночку.
4Если ниже — оставьте цвет и добавьте значок, форму или подпись, чтобы он никогда не был единственным сигналом.

Запустить имитацию

Если что-то пошло не так

Все сообщения, которые может показать пипетка, что каждое означает и что делать дальше.

Это изображение слишком большое.Попробуйте файл меньше 40 МБ.

Ограничение касается размера файла, а не размеров в пикселях. Большая фотография пройдёт, а многослойный экспорт на 60 МБ — нет. Сохраните сведённую копию.

Этот файл не является изображением.Подходят PNG, JPEG, WebP, AVIF, GIF, BMP и SVG.

Обычно это PDF, файл макета или ZIP. Сначала выгрузите из него растровое или векторное изображение.

У этого изображения нет заданного размера.Векторному файлу нужны ширина и высота, иначе снимать цвет неоткуда.

У SVG без ширины и высоты на корневом элементе нет собственного разрешения, с которого можно снимать. Добавьте их или откройте файл и сохраните PNG.

Это изображение не удалось получить.Сайт, где оно лежит, запрещает другим сайтам читать свои изображения. Скачайте файл и перетащите его сюда.

Это правило браузера, и ни одна веб-страница не может его обойти. Скачайте файл и перетащите его сюда.

Поддерживаются только ссылки http и https.

Вы вставили что-то, что не является веб-адресом, либо ссылку вида data: или file:. Для локального файла воспользуйтесь кнопкой выбора.

Браузер заблокировал доступ к буферу обмена

Копированию нужно разрешение, а некоторые браузеры не дают его в приватных окнах или когда страница не в фокусе. Щёлкните по странице и попробуйте снова — либо выделите значение и скопируйте вручную.

Частые вопросы

Почему не срабатывает Ctrl + V?

Сочетание для вставки не срабатывает, пока курсор стоит в текстовом поле, чтобы вставка ссылки в поле адреса не открывала заодно содержимое буфера обмена как изображение. Щёлкните сначала по пустому месту страницы, потом вставляйте.

Меняется ли цвет, если приблизить изображение?

Нет. Приближение и перемещение изображения касаются только того холста, на который вы смотрите. Каждое чтение снимается со второго, скрытого холста, который держит изображение в его естественном разрешении, поэтому один и тот же пиксель даёт одно и то же значение и при 100 %, и при 6400 %. Приближайте лишь затем, чтобы видеть, по какому пикселю вы собираетесь щёлкнуть.

Какой размер выборки выбрать?

Начинайте с 1 px. Расширяйте выборку, только когда пиксели вокруг курсора относятся к одной поверхности, но зашумлены: тут она помогает больше всего. На шумной области выборка 11 × 11 отклонилась от настоящего цвета в среднем на 0,57, а один пиксель — на 6,45. У границы делайте наоборот и оставайтесь на 1 px: широкая выборка усреднит цвета через границу и вернёт цвет, которого нет ни с одной стороны.

Почему HEX-код не совпадает с брендбуком?

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

Как сдвинуться ровно на один пиксель?

Щёлкните по изображению один раз, чтобы передать ему фокус, и пользуйтесь стрелками. Каждое нажатие сдвигает курсор на один пиксель, а Shift со стрелкой — на десять. Нажмите Enter, чтобы закрепить цвет под курсором.

Почему картинка не открывается по ссылке, а скачанный файл работает?

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

Сохранятся ли цвета после перезагрузки страницы?

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

Как определить цвет в PDF-файле?

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

Как определить цвет на картинке с телефона?

Откройте сайт в мобильном браузере, нажмите «Выбрать изображение» и возьмите снимок из галереи или сфотографируйте предмет. Разведите два пальца, чтобы приблизить нужное место, и коснитесь его: цвет закрепится меткой, а коды HEX и RGB появятся ниже. Одним пальцем изображение двигается. Наведения на телефоне нет, поэтому сначала приближайте, потом касайтесь.

Вот и весь инструмент

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

Открыть пипетку цвета по фото Начать с HEX-кода