Что такое Пипетка цвета изображения?

Получите точные значения цвета из любого изображения щелчком по нему. Палитра сразу заполняется доминирующими цветами картинки, лупа помогает попасть в нужный пиксель, а каждый цвет идёт сразу в HEX, RGB, HSL, HSV, CMYK и с ближайшим именованным цветом. Сохраняйте оттенки в палитру и экспортируйте их.

Когда изображение загружается, инструмент берёт шесть самых частых цветов и сразу кладёт их в палитру, так что у вас есть стартовый набор ещё до первого клика. Увеличительная лупа показывает отдельные пиксели под курсором, и это помогает попасть точно в нужный тон, а не в сглаженного соседа. Каждый выбранный цвет показывает свои значения HEX, RGB, HSL, HSV и CMYK, а также ближайший именованный цвет CSS, и добавляется в палитру, которую можно скопировать списком hex или экспортировать в JSON или переменные CSS. Есть и просмотр зрения, который пропускает изображение через распространённые фильтры дальтонизма, чтобы вы проверяли доступность прямо в процессе работы.

Как использовать

1. Шаг 1 — Загрузите любое изображение (PNG, JPEG, WebP, GIF). Оно откроется на интерактивном холсте с лупой для увеличения.
2. Шаг 2 — Кликните в любом месте изображения, чтобы взять цвет. Лупа увеличивает область под курсором для точного выбора.
3. Шаг 3 — скопируйте любое значение в HEX, RGB, HSL, HSV или CMYK, либо посмотрите ближайшее имя цвета под образцом. Палитра сохраняет все клики плюс шесть автоматически найденных стартовых цветов — экспорт в один клик.

Когда использовать

• Подобрать брендовый цвет по скриншоту или рендеру макета.
• Собрать палитру из референсной фотографии для дизайн-проекта.
• Узнать точный оттенок логотипа или баннера конкурента.

Результат

Дизайнер загружает фотографию природы, чтобы извлечь точный бирюзовый оттенок горного озера. После клика по воде он получает #2E8B8C и добавляет цвет в палитру вместе с тремя другими оттенками с того же снимка.

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

Почему выбранный цвет немного отличается от того, что я вижу в Photoshop?

Большинство браузеров переводят изображения в sRGB при загрузке. Если исходник был помечен как Adobe RGB или Display P3, здесь вы получите sRGB-эквивалент. Для полного совпадения экспортируйте оригинал в sRGB перед загрузкой.

Лупа показывает один пиксель или среднее по области?

Лупа берёт пробу только с одного пикселя — того, что находится под перекрестием. Окружающие пиксели рисуются для удобства ориентации. Клик внутри лупы фиксирует значение этого пикселя, чтобы сглаженные края не сбивали с толку.

Можно ли брать цвета с PNG, где есть прозрачные участки?

Можно. Прозрачные пиксели возвращают исходные RGB-значения, а альфа выводится отдельно. Полностью прозрачный пиксель покажет цвет фона канваса (по умолчанию белый), поэтому для надёжного результата кликайте по непрозрачным областям.

Чем отличаются HEX, RGB, HSL, HSV и CMYK — какой из них использовать?

HEX (#2E8B8C) — самая короткая запись для CSS и графических редакторов. RGB даёт три канала по 0–255, удобно, когда код требует чистых чисел. HSL описывает тон, насыщенность и светлоту — проще, когда нужно чуть осветлить или насытить цвет. HSV похож, но использует value (воспринимаемую яркость) вместо светлоты, и большинство пипеток в дизайн-софте работают именно в нём. CMYK даёт четыре печатных процента — формат, который запрашивает типография или дизайнер полиграфии.

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

Каждая загрузка заранее заполняет палитру шестью доминирующими цветами изображения, а каждый последующий клик добавляет в набор ещё одну пробу. Панель палитры показывает всё взятое и позволяет скопировать любой образец, скопировать все hex-коды сразу, удалить отдельные записи или экспортировать весь набор как файл JSON или как готовые к вставке пользовательские свойства CSS.

Похожие инструменты