Как найти hex-код цвета на сайте с помощью Eye Dropper в Chrome

TL;DR

Eye Dropper — расширение для Google Chrome, которое позволяет быстро узнать hex, RGB и HSL значения любого пикселя на веб‑странице. Установите его из Chrome Web Store, выберите «Pick color from web page» и кликните по нужной точке на странице.

Краткое объяснение

Hex — это шестизначный код цвета в формате #RRGGBB. RGB описывает интенсивность красного, зелёного и синего каналов. HSL показывает цвет, насыщенность и яркость. Все три формата взаимосвязаны и применяются в веб‑дизайне и разработке.

Что такое расширение Eye Dropper для Chrome

Eye Dropper — лёгкое расширение, которое снимает код цвета с экрана внутри браузера. Оно удобно для веб‑дизайнеров, фронтенд‑разработчиков и маркетологов, которым нужно точное значение цвета прямо с сайта.

Важно: расширение работает только в Chrome. Для Windows можно использовать PowerToys Color Picker. На Mac есть системные средства и сторонние приложения для подбора цвета.

Как установить Eye Dropper

1. Откройте страницу расширения Eye Dropper в Chrome Web Store.
2. Нажмите Add to Chrome.

3. После установки появится уведомление, и иконка Eye Dropper отобразится в правом верхнем углу панели инструментов Chrome.

4. Если иконку не видно, нажмите на значок Extensions и закрепите Eye Dropper, чтобы он всегда был под рукой.

Как использовать Eye Dropper, чтобы получить hex любого пикселя

1. Кликните по иконке Eye Dropper в правом верхнем углу Chrome.
2. Выберите кнопку Pick color from web page.

3. Рядом с курсором появится квадрат‑прицел. Наведите его на нужную область страницы. В нижнем правом углу окна Chrome появится hex‑код цвета.

4. Кликните, чтобы зафиксировать пиксель.
5. Откройте снова расширение — выбранный цвет будет в истории, его можно выделить и скопировать. В интерфейсе также показаны RGB и HSL значения.

Быстрая методика: шаг за шагом

• Откройте страницу с нужным цветом.
• Нажмите иконку Eye Dropper в панели инструментов.
• Выберите Pick color from web page.
• Наведите прицел и нажмите для выбора пикселя.
• Скопируйте hex/RGB/HSL в нужный инструмент (редактор, CSS, палитру).

Альтернативные способы и инструменты

• PowerToys Color Picker (Windows) — системный пипетка для всего экрана.
• DigitalColor Meter / Пипетка в macOS — встроенные средства на Mac.
• Встроенный color picker в DevTools (Chrome, Firefox) — полезен, если нужно узнать цвет элементов DOM и их computed style.
• Другие расширения: ColorZilla, ColorPick Eyedropper.

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

• Если цвет формируется динамически (Canvas/WebGL) и прицел не попадает на пиксель корректно.
• При наложении WebGL/видеопотоков браузер может блокировать считывание точного цвета.
• Если страница защищена политиками контента или расширение ограничено настройками браузера.

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

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

• Дизайнер: получить hex → добавить в палитру проекта → проверить контраст по WCAG.
• Разработчик: получить hex → вставить в CSS/SCSS → протестировать в разных браузерах.
• Маркетолог: получить hex → использовать в макете кампании → согласовать с бренд‑гайдом.

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

• Hex код скопирован и вставлен в целевой файл без изменений.
• RGB/HSL значения совпадают с ожидаемыми в редакторе цвета.
• Контраст текста и фона проверен по стандарту WCAG, если цвет используется для текста.

Примеры провалов и советы по устранению

• Проблема: полученный цвет отличается в дизайне. Решение: проверьте цветовой профиль монитора и сравните значение в другом инструменте (например, DevTools).
• Проблема: пипетка не захватывает пиксель. Решение: сделайте скриншот и используйте локальный графический редактор с расширенной пипеткой.

Небольшой справочник (глоссарий в одну строку)

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

Решение, какой инструмент выбрать

flowchart TD
  A[Нужен цвет с веб-страницы?] --> B{Вы в Chrome?}
  B -- Да --> C[Используйте Eye Dropper]
  B -- Нет --> D{Вы на Windows?}
  D -- Да --> E[PowerToys Color Picker]
  D -- Нет --> F{Вы на Mac?}
  F -- Да --> G[Используйте DigitalColor Meter или стороннее приложение]
  F -- Нет --> H[Сделайте скриншот и используйте графический редактор]

Рекомендации по безопасности и приватности

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

Итог

Eye Dropper — быстрый и удобный способ получить hex, RGB и HSL значения цветов прямо из Chrome. Используйте встроенную историю цветов, проверяйте значения в целевых инструментах и применяйте альтернативные средства, если пипетка не может считать пиксель.

Важно: всегда сверяйте полученный код в редакторе и тестируйте контрастность дизайна.