Как получить HEX‑код любого цвета на экране (Windows, macOS, iPhone, Android)

Экраны ваших устройств отображают миллионы цветов. Понравился какой‑то оттенок и вы хотите использовать его в дизайне, теме приложения или CSS? Для этого обычно используют «пипетку» — утилиту, которая считывает цвет с пикселя и возвращает его код (HEX, RGB и т. п.).

В этой статье описаны простые и бесплатные инструменты для Windows, macOS, браузеров, iPhone и Android. Я также добавил практические рекомендации по точности, альтернативные подходы, чек‑листы для разных ролей и таблицу сравнения, чтобы вы могли быстро выбрать подходящий вариант.

Краткий обзор инструментов

• Instant Eyedropper — лёгкая утилита для Windows, копирует HEX одним щелчком.
• System Color Picker — бесплатное macOS‑приложение, можно закрепить в строке меню.
• Digital Color Meter — встроенный macOS‑инструмент (Utilities), можно переключить на HEX.
• ColorZilla — расширение для Chrome и Firefox с пипеткой и историей цветов.
• Markup — встроенный инструмент iOS для выбора цвета из изображений и скриншотов.
• Color Picker (Android) — стороннее приложение, позволяет брать цвет со скриншота или камеры.

Каждый инструмент имеет свои сильные стороны: одни удобнее на десктопе, другие — в браузере или на мобильном устройстве.

Как пользоваться по платформам

1. Instant Eyedropper (Windows)

Instant Eyedropper — небольшая программа, которая показывает HEX‑значение цвета пикселя под курсором и копирует его в буфер обмена при отпускании кнопки мыши.

Инструкция:

1. Скачайте и установите Instant Eyedropper.
2. Запустите программу; её значок появится в трее (рядом с часами).
3. Нажмите и удерживайте левую кнопку мыши над значком, переместите курсор к нужному пикселю на экране.
4. Отпустите кнопку — HEX‑код автоматически скопируется в буфер обмена.

Важно: в настройках (Options) можно изменить формат вывода (HEX с префиксом #, без, RGB и т. д.).

Скачать: Instant Eyedropper для Windows (Free)

2. System Color Picker (Mac)

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

Как настроить и использовать:

1. Установите System Color Picker.
2. Запустите приложение.
3. В строке меню откройте Color Picker > Settings.
4. Вкладка General: включите Show in menu bar вместо Dock, если хотите быстрый доступ.
5. Нажмите на иконку капли в строке меню и выберите Pick Color.
6. С помощью увеличительного стекла наведите указатель на нужный пиксель и дождитесь появления значения.
7. HEX‑код появится в Recently Picked Colors; копируйте в буфер обмена.

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

Скачать: System Color Picker для Mac (Free)

3. Digital Color Meter (Mac)

Digital Color Meter — штатный инструмент macOS (Applications > Utilities). По умолчанию показывает RGB; переключите на HEX в меню.

Инструкция:

1. Откройте Digital Color Meter (через Finder или Spotlight).
2. В меню: View > Display Values > as Hexadecimal.
3. Наведите курсор на пиксель, который хотите измерить.
4. Нажмите Command + Shift + C, чтобы скопировать HEX в буфер обмена.

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

4. ColorZilla (Chrome и Firefox)

ColorZilla — популярное расширение браузера с пипеткой, истории цветов и возможностью авто‑копирования.

Как использовать:

1. Установите ColorZilla в Chrome или Firefox.
2. Кликните по иконке расширения в панели инструментов.
3. Выберите инструмент Eyedropper и наведите курсор на нужный пиксель.
4. При наведении увидите HEX и RGB; клик — копирует HEX в буфер.

В настройках можно выбрать формат копируемого цвета и включить auto‑copy.

Скачать: ColorZilla для Chrome | Firefox (Free)

5. Markup (iPhone и iPad)

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

Шаги:

1. Сделайте скриншот экрана (Power + Volume Up или кнопка Home в зависимости от модели).
2. Нажмите на превью скриншота в левом нижнем углу, чтобы открыть Markup.
3. Внизу выберите инструмент «пипетка» рядом с линейкой.
4. Откройте вкладку Colors > Sliders и тапните по иконке пипетки в Sliders.
5. Перетащите увеличительное стекло на интересующий пиксель; в меню будет показан точный HEX‑код.

Это обходной путь, но он не требует сторонних приложений.

6. Color Picker (Android)

На Android чаще всего используют сторонние приложения. Одно из популярных — Color Picker от Mikhail Gribanov, которое умеет брать цвет с изображения и даже из камеры.

Инструкция:

1. Установите Color Picker из Google Play.
2. Сделайте скриншот нужного экрана или откройте изображение.
3. Откройте приложение, нажмите Open Image и выберите скриншот из Галереи.
4. Панорамируйте и увеличьте изображение, чтобы нужный цвет оказался в центре круговой области.
5. Скопируйте показанный HEX‑код.

Преимущество: можно захватывать цвета с камерой в реальном времени. Но обратите внимание на требуемые разрешения (включая доступ к хранилищу и камере).

Скачать: Color Picker для Android (Free)

Сравнительная матрица инструментов

Когда метод может не сработать

• Полупрозрачные элементы и наложение: пипетка считает итоговый цвет, а не отдельный источник.
• Аппаратные цветовые профили и калибровка: один и тот же HEX на разных дисплеях может выглядеть иначе.
• Защищённый контент (DRM) или аппаратное ускорение в браузере могут мешать расширениям.
• Темный режим и графические фильтры ОС — всегда уточняйте, с каким состоянием использовался цвет.

Важно: цвет, который вы видите, — это результат пикселя на конкретном дисплее. Для точной печати и бренд‑кодов используйте профиль цвета и проверяйте на целевых устройствах.

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

• Взятие цвета через инструменты разработчика в браузере (Inspect Element → color в CSS).
• Экспорт изображения в графический редактор (Photoshop, GIMP) и использование его пипетки — удобно для сложных изображений и слоёв.
• Использование цифрового колориметра (аппаратный инструмент) для калибровки и точного измерения на дисплее.

Мини‑методология: как последовательно получать корректный HEX

1. Определите цель: экран / веб / печать.
2. Если нужно максимальное соответствие, калибруйте дисплей при помощи профиля sRGB/ICC.
3. Снимите скриншот или включите выбранный инструмент в живом режиме.
4. Захватывайте цвет с самого пикселя, избегая масштабирования и пост‑обработки.
5. Проверьте результат в двух инструментах (например, Digital Color Meter + ColorZilla) для верификации.
6. Документируйте источник и время измерения (полезно при проблемах с воспроизводимостью).

Role‑based чек‑листы (Кто и что должен делать)

Дизайнер:

• Проверить HEX в Design System и связать с переменной.
• Сохранить цвет в библиотеку (Figma, Sketch) с меткой.
• Указать сопутствующие значения (RGB, HSL, контраст).

Разработчик:

• Проверить корректный формат (#RRGGBB или #RGB) для кода.
• Убедиться в соответствии с системой тем (light/dark).
• Использовать CSS переменные для повторного использования.

QA / Тестировщик:

• Сверить цвет на тестовом устройстве и в целевых браузерах.
• Проверить доступность: контраст между текстом и фоном.

Контент‑менеджер:

• Указывать HEX в метаданных при загрузке изображений.
• Хранить оригинальные файлы и скриншоты для верификации.

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

• HEX‑код совпадает при проверке минимум двумя инструментами.
• Контраст текста и фона соответствует требованиям доступности (WCAG) для нужного контекста.
• Цвет задокументирован и привязан к компоненту/переменной в системе дизайна.

Советы по точности и лучшие практики

• Проверяйте цвет в режиме 100% масштабирования для изображений (без ресемплинга).
• Не используйте камеру телефона для финальной верификации цвета — только для быстрых набросков.
• Для брендов используйте профили ICC и цветовые пространства, оговорённые в бренд‑гайдах.
• Храните исторические значения цвета — иногда цвета меняют в процессе дизайна.

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

• При использовании мобильных приложений вы предоставляете доступ к фотографиям/камере: проверьте права и политику конфиденциальности приложения.
• Скриншоты могут содержать личные данные — удаляйте или закрывайте конфиденциальные зоны перед передачей изображения третьим лицам.

Краткое резюме

Маленькие утилиты типа пипеток незаменимы для дизайнеров и обычных пользователей: они позволяют быстро получить точный HEX‑код для верстки, тем и брендовых материалов. Выбирайте инструмент, исходя из устройства: Instant Eyedropper или Digital Color Meter для десктопа, ColorZilla для работы в браузере, Markup для быстрого извлечения с iPhone и сторонние приложения для Android.

Полезно: протестируйте два инструмента для верификации и документируйте источник цвета.

Дополнительные ресурсы:

• Используйте CSS‑переменные для единообразного применения цветов.
• Для печати и полиграфии проконсультируйтесь со специалистом по допечатной подготовке.

Факт‑бокс:

• Количество инструментов в статье: 6
• Поддерживаемые платформы: Windows, macOS, Chrome/Firefox, iOS, Android

Глоссарий (1‑строчные определения):

• HEX: шестнадцатеричное представление цвета в формате #RRGGBB.
• RGB: представление цвета через каналы красного, зелёного и синего.
• Пиксель: минимальная точка изображения на экране.

Важно: цвета на экране — это визуальное отображение конкретного пикселя и профиля дисплея; для полиграфии и бренд‑кодирования требуются дополнительные шаги.