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

Что такое Eye Dropper

Eye Dropper — это расширение для браузера Google Chrome, которое позволяет найти hex‑код любого пикселя на веб‑странице. Оно считывает цвет в формате hex (#RRGGBB), а также отображает эквивалентные значения RGB и HSL.

Определения в одну строку:

• Hex — шестизначная запись цвета в шестнадцатеричной системе, например #1a2b3c.
• RGB — представление цвета через красный, зелёный и синий каналы, например rgb(26,43,60).
• HSL — представление цвета через тон, насыщенность и светлоту, например hsl(210,30%,17%).

Важно: Eye Dropper работает только в браузере Chrome. Для захвата цвета вне браузера используйте PowerToys Color Picker на Windows или стандартный пипет в macOS.

Как добавить Eye Dropper в Chrome

1. Откройте Chrome Web Store в браузере Chrome.
2. Перейдите на страницу расширения Eye Dropper в Интернет‑магазине Chrome.
3. Нажмите кнопку «Добавить в Chrome».

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

6. Если значок не виден, откройте меню «Расширения» и закрепите Eye Dropper, чтобы он всегда отображался.

Как пользоваться Eye Dropper для получения hex значения пикселя

1. Нажмите на значок Eye Dropper в правом верхнем углу панели инструментов Chrome.
2. Выберите «Выбрать цвет со страницы».

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

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

Быстрый чек‑лист: захват цвета за 30 секунд

• Убедитесь, что масштаб страницы 100% и нет масштабирования окна браузера.
• Закрепите Eye Dropper в панели расширений для быстрого доступа.
• Наведите курсор, дождитесь появления превью, затем кликните.
• Скопируйте hex‑код из панели расширения.

Important: Если на странице есть динамические эффекты (анимация, hover), временно остановите анимацию или сделайте скриншот и используйте пипет на статичном изображении.

Альтернативные способы и когда Eye Dropper не подойдёт

• Системные цветопики: PowerToys Color Picker (Windows) или Digital Color Meter (macOS) — подходят для цветов вне браузера.
• Инструменты разработчика Chrome: встроенный пипет в DevTools (в последних версиях есть собственный color picker) — полезно при работе с CSS и переменными.
• Снимок экрана + графический редактор (Photoshop, GIMP) — когда нужно точнее контролировать зону выборки.

Когда Eye Dropper может дать неверный результат:

• При включённой аппаратной цветокоррекции или некорректном цветовом профиле монитора.
• Если страница использует аппаратное ускорение с наложением слоёв, пипет может считывать слой браузера, а не содержимое.

Советы по точности цвета

• Используйте режим 100% масштабирования браузера.
• Отключите цветовые фильтры операционной системы.
• При цветокоррекции в дизайне ориентируйтесь на hex + тестируйте в нескольких браузерах и на разных устройствах.

Роль‑ориентированные чек‑листы

Дизайнер:

• Захватить цвет, скопировать hex и добавить в стиль‑гайд.
• Проверить контраст с фоном (WCAG) и при необходимости подобрать альтернативный цвет.

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

• Получить hex, конвертировать в SCSS/LESS переменную.
• Проверить, не переопределяет ли стиль CSS‑переменная.

Маркетолог/копирайтер:

• Сохранить hex в документе бренда.
• Убедиться, что цвет корректно отображается на рекламных креативах.

Мини‑методология для команд: от захвата к внедрению

1. Захват цвета с помощью Eye Dropper.
2. Скопировать hex → создать переменную в репозитории (пример: –brand-accent: #1a2b3c;).
3. Добавить цвет в гайдлайн и проверить контрастность.
4. Тест на реальных устройствах и релиз через CI.

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

• Цвет захвачен и сохранён в hex формате.
• Hex внедрён в код как переменная/константа.
• Пройден тест контрастности для текста/фоновых элементов.

Однострочный глоссарий

hex: шестизначная запись цвета в формате #RRGGBB; RGB: red/green/blue; HSL: hue/saturation/lightness.

Короткая итоговая сводка

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

Social preview (рекомендуется):

• Заголовок: Как быстро получить hex‑код цвета на сайте
• Описание: Установите Eye Dropper в Chrome и копируйте hex, RGB и HSL значениe выбранного пикселя за пару кликов.

Краткие заметки:

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