Description from extension meta
Возьмите любой цвет пикселя с любой веб-страницы и мгновенно скопируйте его HEX-код.
Image from store
Description from store
Точность цвета — это нить, которая связывает воедино каждый красивый интерфейс, актив бренда, панель визуализации данных и маркетинговую кампанию. Тем не менее, дизайнеры и инженеры фронтенда все еще тратят бесчисленные минуты, щурясь на шестнадцатеричные коды в инструментах разработки или делая скриншоты страницы только для того, чтобы попробовать ее в Photoshop. Eye Drop Tool — легкое расширение для браузера, созданное на основе Manifest V3 — превращает это трение в один элегантный жест: щелкните значок панели инструментов, выберите любой пиксель в области просмотра, и точное значение #RRGGBB будет скопировано в ваш буфер обмена. Тонкий тост подтверждает действие, и вы сразу же возвращаетесь к работе, прежде чем ваш поток будет нарушен.
Почему это расширение имеет значение
Браузерные собственные палитры цветов существуют уже много лет, но большинство из них зарыты глубоко в инспекторе, ограничены элементами в DOM или спрятаны за подменю, вызываемыми правой кнопкой мыши. Инструмент Eye Drop Tool демонстрирует ту же мощь в постоянно присутствующей кнопке, которая работает со всем, что отображает ваш монитор — изображениями, холстами, видеокадрами, SVG и даже сторонними плагинами.
Основные характеристики
Активация одним щелчком мыши – нет всплывающего окна или панели настроек. Фоновый сервисный работник мгновенно внедряет скрипт содержимого выбора, сохраняя накладные расходы памяти близкими к нулю при простое.
Универсальная пиксельная выборка. Поскольку расширение захватывает буфер экрана, а не дерево DOM, оно работает с динамически отрисованными сценами WebGL, играми и потоковым видео так же хорошо, как и со статическим HTML.
Мгновенное копирование в буфер обмена — строка HEX автоматически записывается в буфер обмена; вы можете вставить ее прямо в Figma, VS Code или Slack без промежуточного диалога.
Визуальное подтверждение — микровзаимодействие в углу страницы («#ffcc33 скопировано!») подтверждает, что действие выполнено успешно, и исчезает через 1,5 секунды.
Преимущества для пользователя
Экономия времени – Исключите необходимость обращения к инструментам разработки или внешним приложениям. В ходе спринта дизайна эти секунды складываются в часы.
Снижение когнитивной нагрузки. Нахождение в одном и том же ментальном контексте поддерживает творческий поток; вам не приходится жонглировать окнами или переключать внимание.
Идеальное соответствие пикселям — быстро проверяйте, соответствует ли производственный код руководству по фирменному стилю или соответствуют ли маркетинговые макеты коэффициентам контрастности для обеспечения доступности.
Предотвращение ошибок — ручной ввод шестнадцатеричных кодов способствует опечаткам; копирование в буфер обмена устраняет этот риск, что приводит к более чистым коммитам и меньшему количеству сообщений об ошибках.
Целевые группы пользователей
UI/UX-дизайнеры
Быстрое создание образцов цветов из реальных прототипов для повторного использования в системах проектирования.
Тонкая настройка оттенков во время сеанса обзора Figma
Разработчики интерфейсов
Проверьте, что переменные CSS отображаются правильно в разных состояниях.
Наведите курсор на кнопку в режиме подготовки и выберите ее активный цвет.
Инженеры по контролю качества
Подтвердите коэффициенты контрастности WCAG и соответствие бренду
Во время регрессионного тестирования сравните производственную сборку со спецификацией
Цифровые маркетологи и создатели контента
Сочетание специальной графики с палитрой веб-сайта
Потяните за синий баннер героя, чтобы получить социальную плитку в последнюю минуту