Как найти HEX-цвет на экране — инструменты и советы

Линия разноцветных карандашей разной толщины и оттенков

Ваши цифровые устройства отображают миллионы насыщенных цветов. Нравится конкретный оттенок и хотите использовать его в дизайне или в теме приложения? Сначала нужно определить HEX-код (или код цвета) пикселя — для этого служат пипетки (eyedropper tools).

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

Как работают пипетки цвета

Пипетка считывает цвет одного пикселя или усредняет значения в регионе и возвращает представление цвета: HEX (#RRGGBB), RGB (r, g, b) и иногда HSL. Определение HEX — это конвертация RGB в шестнадцатеричный формат.

Определение в одну строку: пипетка — это утилита, которая подводит к любому пикселю курсор, считывает его цвет и показывает/копирует код.

Важное: отображаемый цвет зависит от профиля монитора, HDR/SDR и других слоёв интерфейса (полупрозрачные элементы, тени, сглаживание). См. раздел Риски.

Выбор инструмента по устройству

flowchart TD
  A[Устройство?] --> B{Windows}
  A --> C{macOS}
  A --> D{iPhone / iPad}
  A --> E{Android}
  B --> B1[Instant Eyedropper]
  C --> C1[System Color Picker]
  C --> C2[Digital Color Meter]
  D --> D1[Markup через снимок экрана]
  E --> E1[Color Picker 'приложение']

Используйте инструмент, соответствующий вашей ОС, чтобы упростить рабочий процесс. Ниже подробные инструкции и советы по каждому варианту.

1. Instant Eyedropper — Windows

Instant Eyedropper — лёгкая утилита для Windows, которая точно показывает HEX-значение цвета под курсором. Когда вы удерживаете кнопку мыши, утилита показывает код пикселя под указателем; отпустите кнопку — код копируется в буфер обмена.

Панель Instant Eyedropper с показанным HEX-кодом цвета и меню опций

Советы и параметры:

Через правый клик по иконке откройте Options и выберите формат (HEX с/без #, RGB, HSL и т.д.).
Можно настроить авто-копирование в буфер при клике.
Работает только в среде рабочего стола; некоторые окна (например, защищённый DRM-контент) могут быть недоступны для захвата.

Скачать: Instant Eyedropper для Windows (Бесплатно)

2. System Color Picker — macOS

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

Инструкция:

Запустите приложение и в строке меню выберите Color Picker > Settings.
Во вкладке General включите Show in menu bar instead of Dock.
Нажмите иконку в меню (капля) и выберите Pick Color.
Используйте увеличительную лупу, чтобы навести курсор на нужный пиксель.
Повторно кликните по иконке меню и посмотрите HEX-код в разделе Recently Picked Colors.

Интерфейс System Color Picker на Mac с выделенной каплей в строке меню

Если не хотите иконку в меню, просто откройте приложение и используйте инструмент пипетки в окне Color Picker.

Скачать: System Color Picker для Mac (Бесплатно)

3. Digital Color Meter — macOS (встроенный)

На Mac есть встроенный Digital Color Meter (Программы > Служебные программы). По умолчанию он показывает RGB-значения, но можно переключить отображение в HEX.

Шаги:

Запустите Digital Color Meter (через Applications > Utilities или Spotlight).
В строке меню выберите View > Display Values > as Hexadecimal.
Передвигайте курсор и используйте сочетание Command + Shift + C, чтобы скопировать HEX-значение пикселя.

Окно Digital Color Meter в macOS с показанными RGB/HEX значениями

Преимущество: не требует установки, быстро доступен и работает для большинства экранных сцен.

4. ColorZilla — расширение для Chrome и Firefox

ColorZilla — популярное браузерное расширение. После установки нажмите на иконку в тулбаре, выберите пипетку и наводите курсор на пиксели страницы. Инструмент показывает HEX и RGB, позволяет копировать код кликом.

Выпадающее окно расширения ColorZilla в браузере с опциями пипетки

Особенности:

Hover показывает HEX и RGB в реальном времени.
Настройка автокопирования и формат вывода в настройках расширения.
Удобно для веб-дизайна — может считывать цвета непосредственно из DOM и CSS.

Интерфейс с успешно выбранным HEX-значением и кнопкой копирования

Скачать: ColorZilla для Chrome | Firefox (Бесплатно)

5. Markup Tool — iPhone и iPad

Хотя iOS не позволяет пипетке напрямую брать цвет с любого живого пикселя интерфейса, встроенный инструмент Markup позволяет получить HEX и RGB из изображений. Порядок действий:

Сделайте скриншот и нажмите на появившийся предварительный просмотр внизу экрана, чтобы открыть Markup.
Нажмите на пипетку рядом с линейкой внизу.
Перейдите во вкладку Sliders в меню цветов и нажмите на значок капли.
Перетащите лупу на нужный пиксель — меню покажет точный HEX-код.

Интерфейс инструмента Markup в iOS с открытым выбором цвета

Экран Markup, где отображается HEX-код выбранного цвета

Это работает как обходной путь: нужен скриншот, но не требуется стороннее приложение.

6. Color Picker — Android

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

Интерфейс приложения Color Picker на Android с показанным HEX-кодом

Разрешения приложения Color Picker в Android

Инструкция:

Установите Color Picker от Mikhail Gribanov из Google Play.
Сделайте скриншот нужного экрана, запустите приложение.
Нажмите Open Image и выберите скриншот из галереи.
Панорамируйте и увеличьте изображение, чтобы нужный цвет оказался в круге в центре — приложение покажет HEX.

Скачать: Color Picker для Android (Бесплатно)

Сравнительная таблица популярных способов

Инструмент	Платформа	Бесплатно	Захват с экрана	Захват камерой	Автокопирование HEX	Форматы
Instant Eyedropper	Windows	Да	Да	Нет	Да	HEX, RGB
System Color Picker	macOS	Да	Да	Нет	Нет	HEX, RGB
Digital Color Meter	macOS	Да (встроено)	Да	Нет	Нет (копирование сочетанием)	RGB, HEX
ColorZilla	Chrome/Firefox	Да	Да (вкладка браузера)	Нет	Да	HEX, RGB, HSL
Markup	iPhone/iPad	Да (встроено)	Через скриншот	Камера → скриншот	Нет	HEX, RGB
Color Picker	Android	Зависит	Через изображение	Да	Зависит	HEX, RGB

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

Мини-методика: как получить максимально точный HEX

Калибруйте монитор для рабочей среды (яркость, контраст, цветовой профиль).
Отключите полупрозрачные элементы и эффекты (тени, сглаживание), если нужно точное значение.
Используйте скриншот вместо live-сэмплинга, если есть мигание или анимация.
При захвате из изображения увеличьте область и применяйте усреднение по 3×3 или 5×5 пикселей, чтобы избежать артефактов сглаживания.
Проверьте цвет в HEX и RGB, убедитесь, что профиль (sRGB vs Display P3) соответствует назначению.

Короткая подсказка: для веба ориентируйтесь на sRGB; для мобильных современных приложений учитывайте Display P3 при работе с яркими цветами.

Критерии приёмки

Полученный HEX-код совпадает с цветом цели при отображении в целевой среде (браузер/мобильное приложение).
Захваченный цвет не искажен за счёт полупрозрачных слоёв или теней.
При использовании усреднения выбранный метод применён последовательно (например, 3×3 среднее).
Для командного использования коды документированы в одном цветовом профиле (sRGB/Display P3).

Когда пипетка даёт неверный результат

Полупрозрачные элементы или оверлеи: пипетка может считать итоговый цвет, а не цвет подслоя.
Градиенты и сглаживание: выбор одного пикселя даст переходный цвет.
Защищённый/зашифрованный контент (DRM): захват пикселей может быть невозможен.
Разные цветовые профили: один и тот же HEX может выглядеть по-разному на рисунках с Display P3 и sRGB.
HDR-режим экрана: яркие цвета могут быть отображены иначе при конвертации в обычное пространство цветов.

Если результат кажется неверным — снимите скриншот, откройте в редакторе изображений и попробуйте взять цвет оттуда, либо используйте усреднение нескольких пикселей.

Альтернативные подходы

Использовать CSS/JSON/исходные файлы дизайн-системы вместо пипетки, если есть доступ к исходникам.
Свериться с библиотекой стилей продукта (Design Tokens) — это надёжнее, чем визуальное снятие цвета.
Для печати использовать цветовые пространства CMYK и профиль печати, пипетка для RGB не даст корректного результата для печати.

Чек-листы по ролям

Дизайнер:

Убедиться, что используется правильный цветовой профиль (sRGB/Display P3).
Захватить образцы цвета в виде палитры и документировать HEX и RGB.
Проверить видимость цвета на разных устройствах.

Фронтенд-разработчик:

Полученный HEX заменить в CSS/переменных тем.
Проверить доступность (контраст текста и фона) с использованием стандартных тестов WCAG.
Убедиться, что цвета не перезаписываются другими стилями.

Продуктовый менеджер:

Включить проверку цветов в критерии приёмки задач.
Убедиться, что документация по бренду содержит точные коды цветов.

Безопасность и приватность

Сторонние приложения запрашивают доступ к хранилищу и камере — проверьте права и политику конфиденциальности.
Не устанавливайте сомнительные приложения из непроверенных источников.
Для корпоративных устройств уточните правила установки ПО у ИТ‑отдела.

Совместимость и практические советы

На macOS встроенные утилиты работают без установки.
На Windows Instant Eyedropper — лёгкий вариант; есть и другие альтеративы, включая платные профессиональные утилиты с палитрами.
На мобильных устройствах чаще всего придётся работать через скриншот или сторонние приложения.
Если нужен одинаковый цвет на разных устройствах, согласуйте профиль (sRGB рекомендуем для веба).

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

Q: Можно ли получить HEX из видео?
A: Да, сделайте скриншот кадра (если политика не запрещает), затем возьмите цвет из изображения.

Q: Почему цвет отличается на другом устройстве?
A: Причины: разные профили цвета, калибровка монитора, HDR и особенности дисплея.

Q: Как убрать # из HEX?
A: Большинство инструментов дают опции формата — в настройках выберите без символа #.

1‑строчная глоссарий

HEX — шестнадцатеричная запись цвета в формате #RRGGBB; RGB — представление цвета через каналы красный, зелёный, синий.

Факт-бокс: ключевые моменты

Практически все платформы имеют способ получить цвет — встроенный или сторонний.
Для веба ориентируйтесь на sRGB.
Скриншот + Markup/редактор даёт более стабильный результат при динамическом содержимом.
Учитывайте полупрозрачные слои и цветовые профили.

Короткое объявление для команды (100–200 слов)

Нужен точный цвет с экрана? Мы собрали проверенные способы для всех устройств: Instant Eyedropper для Windows, System Color Picker и Digital Color Meter для Mac, Markup для iPhone/iPad и приложение Color Picker для Android. Для веба удобно использовать ColorZilla. В статье есть методика для точного захвата (калибровка, скриншот, усреднение пикселей), чек-листы для дизайнеров и разработчиков, а также список ситуаций, когда пипетка может ошибаться (полупрозрачность, градиенты, цветовые профили). Совет: согласуйте профиль (sRGB или Display P3) и документируйте цвета в общей палитре, чтобы избежать расхождений между устройствами.

Резюме

Пипетки — быстрый и удобный способ получить HEX из экрана.
Выбор инструмента зависит от платформы: встроенные утилиты на macOS, Instant Eyedropper на Windows, Markup на iOS, сторонние приложения на Android.
Для точных цветов учитывайте профиль, используйте скриншоты и усреднение пикселей.

Дополнительные ресурсы: проверьте настройки цветовых профилей в системе и используйте инструменты проверки контраста для доступа и соответствия стандартам.