Как взять цвета со скриншота (2026)

Скриншот часто — единственное, что у вас есть. Вы не можете открыть CSS сайта, не можете инспектировать приложение, у вас нет файла дизайна — но вы видите цвета на экране, а скриншот замораживает их в картинку, которую можно сэмплировать. Вот как вытащить из неё точные коды цветов.

Почему скриншот — честный источник

Когда вы делаете скриншот отрендеренной страницы или приложения, вы захватываете цвета такими, какими они реально выглядят — после того как применены все градиенты, оверлеи и прозрачности. Это часто правдивее исходного значения. Карточка, заданная как #000000 при 90% непрозрачности поверх серого фона, на экране не чёрная; это некий конкретный тёмно-серый. Инспекция кода даёт вам рецепт; сэмплирование скриншота даёт цвет, который пользователь действительно видит. Когда вы подгоняете этот вид, читать нужно именно скриншот.

Возьмите цвет в три шага

1. Сделайте и загрузите скриншот. Захватите экран (или интересующую область) и забросьте картинку в пипетку.
2. Наведите на пиксель. Лупа-увеличитель следует за курсором и укрупняет область под ним, так что можно попасть точно — даже на тонкую рамку или маленькую иконку.
3. Кликните, чтобы сохранить, затем скопируйте. Каждый клик сохраняет цвет как образец с его HEX, RGB и HSL, у каждого есть кнопка копирования. Скопируйте нужный формат и вставьте в свою таблицу стилей или дизайн-инструмент.

На что смотреть именно со скриншотами

У скриншотов есть особенности, способные сбить сэмпл цвета, и их легко избежать, зная о них:

• Сохраняйте как PNG, а не JPEG. Сжатие JPEG слегка размазывает цвета, особенно у краёв и в плоских областях, так что сэмплированное значение может уйти от истинного. PNG без потерь и держит каждый пиксель точно — большинство системных инструментов скриншотов уже по умолчанию использует PNG.
• Следите за уровнем масштаба. Скриншот, снятый при масштабе браузера или системы, отличном от 100%, отмасштабирован, а масштабирование смешивает соседние пиксели. Ради чистейшего сэмпла снимайте при 100%.
• Избегайте краёв и текста. Сглаживание означает, что пиксели вдоль любого края — это смеси, а не настоящий цвет. Сэмплируйте из середины сплошной области — лупа помогает увидеть, что вы вдали от размытой границы.
• Остерегайтесь субпиксельного цвета текста. Приблизьте отрендеренный текст — и увидите цветные каёмки, не являющиеся настоящим значением текста. Берите цвета с заливок и фонов, а не со штрихов букв.

Чтение HEX, RGB и HSL

Каждый образец показывает все три формата сразу:

• HEX (#3A7BD5) — вариант по умолчанию для CSS и дизайн-инструментов.
• RGB (rgb(58, 123, 213)) — значения каналов, удобно, когда нужна прозрачность rgba.
• HSL (hsl(215, 65%, 53%)) — тон, насыщенность, светлота, лучше всего, когда хотите подкрутить цвет, а не скопировать его точно.

Пересэмплировать для переключения не нужно — тот же цвет уже присутствует во всех трёх.

Захватите целую схему за один проход

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

Если же вам нужна общая палитра картинки, сведённая за вас — горстка доминирующих тонов — это отдельная работа, и инструмент палитры img.diy извлекает их автоматически. Эта пипетка — чтобы указать на конкретный пиксель на скриншоте; инструмент палитры — чтобы охарактеризовать картинку в целом.

Ничего не покидает вашу машину

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

Сделайте скриншот, наведите на пиксель, кликните и скопируйте.