Когда нужно подобрать цвет кнопки с чужого сайта или повторить оттенок из макета дизайнера, угадывать код на глаз бесполезно — пипетка для экрана решает эту задачу за секунду, показывая точное значение любого пикселя в формате HEX, RGB или HSL. Инструмент применяют веб-дизайнеры, разработчики интерфейсов, верстальщики и все, кто работает с графикой.
В этой статье разберём, где искать пипетку в Windows и macOS, какие программы и расширения для браузеров подходят лучше всего, и как перевести полученный цвет в нужный формат. Отдельно рассмотрим типичные проблемы: почему пипетка не срабатывает и как скопировать цвет с видео или защищённого окна.
Что такое пипетка для экрана и как она работает
Пипетка (eyedropper, color picker) — это инструмент, который считывает значение цвета пикселя под курсором и выводит его в виде кода. Чаще всего результат отображается в формате HEX (например, #3A7BD5), RGB (например, rgb(58, 123, 213)) или HSL. Некоторые утилиты дополнительно показывают CMYK-значения для полиграфии.
Принцип работы простой: программа перехватывает изображение с экрана в точке курсора, определяет координаты пикселя и считывает его цвет из буфера кадра. Продвинутые инструменты умеют усреднять цвет по области 3×3 или 5×5 пикселей — это полезно, когда нужно определить оттенок градиента или текстуры, а не одиночной точки.
Важно понимать: пипетка считывает цвет так, как его видит экран, то есть с учётом цветового профиля монитора. Если дисплей не откалиброван, значения могут немного отличаться от «истинных» значений, заложенных в исходный файл. Для профессиональной работы с печатью это стоит учитывать.
Встроенная пипетка в Windows
В Windows нет отдельного системного инструмента «пипетка для всего экрана», но функция есть в стандартных приложениях. Самый доступный вариант — Paint: откройте скриншот, выберите инструмент «Выбор цвета» (значок пипетки) и кликните по нужной точке. Цвет появится в палитре, а его RGB-значения видны в окне «Изменение цветов».
Более удобное решение — PowerToys Color Picker от Microsoft. Это бесплатная официальная утилита из пакета PowerToys, которая работает в любом окне. После установки достаточно нажать сочетание клавиш Win + Shift + C, навести курсор на нужный пиксель и кликнуть — код цвета сразу попадёт в буфер обмена.
- 🎨 Откройте Microsoft Store или сайт проекта и установите PowerToys.
- ⌨️ Запустите приложение и убедитесь, что модуль Color Picker включён.
- 🖱️ Нажмите
Win + Shift + Cв любом окне — появится лупа с увеличением области. - 📋 Кликните по пикселю: код цвета автоматически скопируется в буфер обмена.
- 📂 Откройте историю пипетки, чтобы вернуться к ранее скопированным цветам.
Обратите внимание: сочетание клавиш можно переназначить в настройках модуля, если стандартное конфликтует с другими программами. Также редактор цвета в PowerToys позволяет «подкрутить» оттенок перед копированием.
☑️ Настройка пипетки PowerToys
Пипетка на macOS
В macOS есть встроенная утилита «Цифровой колориметр» (Digital Color Meter). Найдите её через Spotlight или в папке «Программы → Утилиты». Наведите курсор на любую точку экрана — приложение в реальном времени покажет RGB-значения пикселя, а сочетание Cmd + Shift + C скопирует цвет как текст.
В настройках колориметра можно переключить формат отображения: sRGB, P3, шестнадцатеричный код и другие варианты. Размер апертуры (области считывания) тоже регулируется ползунком — уменьшите его до одного пикселя для точного замера или увеличьте для усреднения.
Дополнительно пипетка встроена в системное окно выбора цвета, которое открывается во многих приложениях (Pages, Keynote, Preview). Там есть значок лупы — кликните по нему, и курсор превратится в увеличительное стекло для выбора цвета с любого места экрана.
Расширения для браузеров
Если работа связана с вебом, удобнее всего использовать пипетку прямо в браузере — не придётся делать скриншоты. Для Chrome и Edge популярно расширение Eye Dropper, для Firefox есть аналогичные дополнения, а в последних версиях браузеров пипетка встроена в инструменты разработчика.
Чтобы открыть пипетку через DevTools, нажмите F12, перейдите на вкладку Elements, найдите в панели стилей любое свойство color и кликните по цветному квадратику — откроется палитра с инструментом захвата цвета со страницы. Способ работает и в Chrome, и в Firefox, хотя расположение элементов может немного отличаться между версиями.
⚠️ Внимание: встроенная пипетка DevTools захватывает цвет только в пределах окна браузера. Для элементов интерфейса системы или других программ используйте PowerToys, Digital Color Meter или сторонние утилиты.
Ещё один нюанс: некоторые сайты используют видео или canvas-элементы, и пипетка браузера может считывать их некорректно. В таком случае сделайте скриншот области и определите цвет уже с изображения — через Paint, Photoshop или онлайн-сервис.
Программы и онлайн-сервисы
Помимо встроенных решений, существуют специализированные утилиты с расширенными функциями: историей цветов, созданием палитр, пипеткой с лупой и экспортом в разные форматы. Выбор зависит от задач — для разового определения цвета хватит системных средств, для постоянной дизайн-работы удобнее отдельное приложение.
| Инструмент | Платформа | Особенности | Цена |
|---|---|---|---|
| PowerToys Color Picker | Windows | Горячие клавиши, история, несколько форматов | Бесплатно |
| Digital Color Meter | macOS | Встроен, регулируемая апертура | Бесплатно |
| Eye Dropper | Chrome, Edge | Пипетка по странице, палитры | Бесплатно |
| Пипетка в Photoshop | Windows, macOS | Усреднение по области, работа со слоями | Подписка |
| Instant Eyedropper | Windows | Лёгкая утилита в трее, копирование в один клик | Бесплатно |
Онлайн-сервисы работают иначе: вы загружаете изображение или скриншот, а затем кликаете по точкам на картинке, получая коды цветов. Это удобно на чужом компьютере, где нельзя устанавливать программы. Однако онлайн-пипетки не могут считать цвет напрямую с экрана — только с загруженного файла, поэтому для «живого» захвата всё равно понадобится локальный инструмент.
Форматы цвета: HEX, RGB и HSL
Получив код, важно правильно его интерпретировать. HEX — шестнадцатеричная запись из шести символов, стандарт для веб-вёрстки. RGB задаёт интенсивность красного, зелёного и синего каналов числами от 0 до 255. HSL описывает цвет через оттенок, насыщенность и светлоту — этот формат удобен, когда нужно сделать цвет светлее или темнее, сохранив тон.
Конвертировать форматы можно прямо в окне пипетки PowerToys, в DevTools браузера (клик по значению с зажатым Shift переключает формат) или в любом графическом редакторе. Ручной пересчёт не требуется — инструменты делают это мгновенно.
Как вручную прочитать HEX-код
HEX-код #3A7BD5 состоит из трёх пар: 3A (красный), 7B (зелёный), D5 (синий). Каждая пара — шестнадцатеричное число от 00 до FF, что соответствует диапазону 0–255 в десятичной системе. Например, 3A в шестнадцатеричной системе — это 58 в десятичной. Так HEX #3A7BD5 эквивалентен RGB(58, 123, 213).
Типичные проблемы и их решения
Иногда пипетка отказывается работать или выдаёт неожиданные значения. Разберём частые ситуации и способы их обойти.
- 🚫 Пипетка не срабатывает на защищённом окне. Некоторые приложения (например, видеоплееры с защитой контента) блокируют захват экрана. Попробуйте другой проигрыватель или скриншот средствами самой программы, если она это позволяет.
- 🌈 Цвет отличается от ожидаемого. Проверьте цветовой профиль монитора и настройки Night Light / Night Shift — фильтры цветовой температуры искажают считываемые значения. Временно отключите их перед замером.
- 🔍 Нужен цвет мелкого элемента. Используйте пипетку с лупой (PowerToys показывает увеличенную область) или увеличьте масштаб экрана/страницы перед захватом.
- 🖥️ Несколько мониторов с разной калибровкой. Один и тот же пиксель может дать разные значения на разных дисплеях, если применены разные профили. Проводите замер на том экране, где будет использоваться результат.
⚠️ Внимание: перед точным замером цвета отключите программы, меняющие цветопередачу экрана (f.lux, Night Light, фильтры для глаз). Иначе вы получите искажённое значение, которое не совпадёт с реальным цветом элемента.
Часто задаваемые вопросы
Можно ли определить цвет с видео на экране?
Да, если видеоплеер не использует защиту от захвата. Поставьте воспроизведение на паузу и используйте PowerToys или Digital Color Meter. Если пипетка показывает чёрный цвет — вероятно, плеер защищает кадр; попробуйте сделать скриншот средствами самого плеера и замерить цвет на изображении.
Какая пипетка лучше для Windows 10 и 11?
Оптимальный вариант — бесплатный PowerToys Color Picker от Microsoft: работает в любом окне, копирует код по горячим клавишам и хранит историю. Для простых задач подойдёт и пипетка в Paint.
Как скопировать цвет в формате HEX?
В PowerToys откройте настройки модуля Color Picker и выберите HEX как формат по умолчанию. В браузерных DevTools кликните по цветному квадратику в панели стилей — там же можно переключить формат отображения.
Почему пипетка показывает другой цвет, чем в макете дизайнера?
Возможные причины: включён ночной фильтр экрана, разные цветовые профили монитора, полупрозрачность элемента (цвет смешивается с фоном) или сглаживание на границах. Замеряйте центр элемента и отключайте фильтры экрана.
Есть ли пипетка на Android и iPhone?
Системной пипетки для всего экрана в мобильных ОС обычно нет, но функция встроена в галереи и редакторы фото при выборе цвета для рисования. Для определения цвета с произвольного экрана сделайте скриншот и откройте его в приложении с пипеткой.