Блог

Как измерить цвета и отступы по скриншоту

Опубликовано 25 октября 2026 г. · пипетка, отступы, дизайн, скриншот

Проверьте HEX-цвет, рамку в 1 px или точный промежуток между элементами, не открывая дизайнерское приложение. Лупа, пипетка и размер выделения всё сделают.

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

Возьмите цвет под указателем

В InSnap включите пипетку в Настройки › Снимок экрана, затем сделайте снимок. Когда вы водите по замороженному изображению, панель цвета показывает значение под указателем.

• Shift переключает RGB и HEX.
• C копирует текущее значение в буфер обмена.
• Образец берётся из замороженного снимка, а не с живого экрана, поэтому значение не изменится, если под ним играет видео или анимация.

Последний пункт важен для дизайн-проверки: вы измеряете пиксели, которые были захвачены, а именно они и есть в файле.

Рассмотрите отдельный пиксель через лупу

Лупа показывает увеличенную сетку вокруг указателя с отмеченным центральным пикселем. Она нужна, когда вопрос не «какого цвета эта область», а «что происходит в этом конкретном пикселе»:

• Это рамка в 1 px или тень?
• Разделитель один пиксель или два?
• Значок выровнен по базовой линии текста?
• Радиус скругления одинаков на всех четырёх углах?

При обычном масштабе эти детали растворяются в сглаживании. Сетка пикселей делает их считаемыми.

Измерьте отступ выделением

Линейки в инструментах нет, но выделение — это линейка. Протяните рамку через нужный промежуток и прочитайте размер:

1. Запустите снимок и протяните от края одного элемента до края следующего.
2. Прочитайте ширину или высоту в подписи размера. Она показывает физические пиксели — то, что есть в файле.
3. Нажмите Esc, чтобы отменить, или скопируйте выделение, если изображение тоже нужно.

Два практических замечания:

• Измеряйте промежуток, а не весь элемент. Выделение от левого края одной кнопки до левого края следующей даёт шаг; если нужен именно промежуток, вычтите ширину кнопки.
• Учитывайте масштаб экрана. На экране Retina 20 физических пикселей — это 10 точек. Если спецификация в точках, разделите на коэффициент масштаба; скриншот всегда в пикселях.

Короткий чек-лист дизайн-проверки

Когда скриншота недостаточно

Пиксели показывают, что отрисовалось, но не почему. Если цвет кажется неправильным, проверьте профиль дисплея и тему приложения, прежде чем заводить баг; если промежуток выглядит не так, проверьте масштаб страницы. Снимок при 90 % масштаба браузера покажет размеры, которые не совпадают с CSS.

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

Частые вопросы

Можно ли скопировать значение цвета сразу?

Да. Включите пипетку, наведите на пиксель, нажмите Shift, чтобы выбрать RGB или HEX, затем нажмите C. Значение попадёт в буфер обмена и будет готово к вставке в задачу или дизайн-файл.

Как измерить промежуток в точках, а не в пикселях?

Прочитайте размер выделения в физических пикселях и разделите на масштаб дисплея: 2 на экране Retina, 1 на обычном экране или значение из системных настроек дисплея для масштабированного режима.

Пипетка читает живой экран или скриншот?

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

Ещё из блога