Где находится пипетка в браузере?

Инструмент «Пипетка» (Eyedropper) спрятан в панели «Инструменты разработчика» (DevTools). Не пугайтесь, это не так сложно, как кажется. Попасть туда можно двумя способами:

  • Способ 1 (быстрый): Нажмите клавишу F12 на клавиатуре. Или комбинацию Ctrl+Shift+I (для Windows/Linux) или Cmd+Option+I (для macOS).
  • Способ 2 (через меню): Кликните правой кнопкой мыши по любому элементу на странице (тексту, картинке, кнопке) и выберите в контекстном меню пункт «Исследовать элемент» (Inspect).

После этих действий в нижней части или сбоку экрана откроется окно с кодом страницы.

Пошаговая инструкция: как определить цвет

Итак, панель разработчика открыта. Теперь нужно найти саму пипетку. Следуйте инструкции:

  1. В панели DevTools найдите вкладку «Elements» (Элементы) — она открыта по умолчанию.
  2. Справа от нее находится вкладка «Styles» (Стили). Именно там отображаются все CSS-правила для выбранного элемента.
  3. В блоке «Styles» найдите любое свойство, отвечающее за цвет. Это может быть color (цвет текста) или background / background-color (цвет фона).
  4. Слева от значения цвета (например, #rgb или названия цвета) вы увидите маленький квадратный или круглый цветной индикатор. Кликните по нему!
  5. Откроется палитра выбора цвета, а курсор мыши превратится в пипетку. Теперь вы можете навести эту пипетку на любой пиксель на экране, даже за пределами панели разработчика.
  6. Кликните мышкой, чтобы «захватить» цвет. Его значение (в HEX или RGB) автоматически подставится в код.

Совет: Если вы хотите просто узнать код цвета, но не менять его в стилях — просто скопируйте значение из поля, которое появилось после клика пипеткой.

Сравнение с онлайн-сервисами

Встроенный инструмент идеально подходит для анализа уже готовых сайтов. Однако у него есть ограничение: вы не можете загрузить свою картинку с компьютера, если она не размещена в интернете. Для работы с локальными файлами или для создания целой палитры удобнее использовать специализированные сервисы, такие как наш онлайн-инструмент «Пипетка».

Загрузите фото в сервис и получите не только код цвета, но и готовую гамму для вашего проекта.

Коротко о главном

Встроенная пипетка в Chrome и Edge — это must-have инструмент для веб-разработчика. Она всегда под рукой, не требует установки и работает мгновенно. Запомните простой алгоритм: F12 → Вкладка Styles → Клик по цветному квадратику. Всего три шага, и код нужного цвета у вас в буфере обмена.