Получение фирменного цвета из макетов и скриншотов сайтов
Увидели понравившуюся цветовую схему сайта или бренда — загрузите скриншот и нажмите на ключевой цветовой блок, чтобы получить точное значение HEX для собственного дизайна или кода.
Обработка на устройстве, без загрузки
Бесплатно, без ограничений
Точная пипетка с лупой + копирование в один клик
Онлайн-пипетка — точно получите код цвета HEX/RGB/HSL из изображения
Нажмите или перетащите на любую точку изображения, чтобы считать цвет
HEX
RGB
HSL
История выборов
После считывания цвета с изображения он будет записан здесь для удобного просмотра и сравнения
Загрузите изображение, двигайте курсор или палец для позиционирования — лупа в реальном времени показывает увеличенные пиксели вокруг курсора для точного попадания, нажмите, чтобы считать цвет этой точки, значения в форматах HEX, RGB, HSL появятся сразу с копированием в один клик, а история выборов сохраняется для сравнения. Всё происходит в браузере на устройстве, без загрузки на сервер.
3формата цвета (HEX/RGB/HSL)
20 МБлимит на одно изображение
0программ для установки
Без загрузки на сервер
Определение цвета и считывание пикселей происходят полностью в браузере, изображение не проходит через какой-либо сервер
Точное позиционирование с лупой
При наведении в реальном времени увеличиваются пиксели вокруг курсора, красная рамка отмечает конкретный пиксель для считывания
Три формата с копированием в один клик
HEX, RGB, HSL отображаются одновременно — нажмите на кнопку копирования и сразу вставьте в дизайн-инструмент или код
Бесплатно без ограничений
Не нужна регистрация или оплата, скрытых лимитов по количеству использований нет
Типичные сценарии
Три самых частых запроса на получение цвета — и все решаются одним инструментом
Получение фирменного цвета, подбор палитры по фото или проверка реализации — нажмите на изображение и получите точный код цвета.
Получение природных оттенков из фото для подбора палитры
Получите оттенки неба, кожи, растений с пейзажного или портретного фото — используйте как основу для подбора палитры в дизайн-проекте или иллюстрации.
Проверка соответствия цвета в макете и в реализации
При вёрстке по макету получите коды HEX со скриншота макета и со скриншота реальной страницы, сравните их — так быстро подтвердите точность передачи цвета без визуальной оценки на глаз.
Форматы цвета
Справочная таблица форматов HEX, RGB, HSL
Три разных способа описания одного и того же цвета — выбирайте формат в зависимости от того, куда будете его вставлять.
| Формат | Пример записи | Типичный сценарий использования |
|---|---|---|
| HEX | #FF3B30 | поле ввода цвета в CSS для веба и большинстве дизайн-инструментов (Figma, Photoshop) |
| RGB | rgb(255, 59, 48) | случаи, когда нужно отдельно просмотреть или изменить значения красного, зелёного, синего каналов |
| HSL | hsl(4, 100%, 59%) | описание через оттенок, насыщенность, светлоту — удобно менять глубину или насыщенность в рамках одного оттенка |
Все три формата описывают полностью одинаковый цвет, просто разными числовыми значениями; на странице каждый формат можно скопировать в один клик и сразу вставить в свой дизайн-инструмент или редактор кода.
Как использовать
Получение цвета из изображения за 4 шага
Не нужно устанавливать никаких программ — всё происходит прямо в браузере, лупа помогает точно попасть в нужную точку.
-
1
Загрузите изображение
Нажмите, чтобы выбрать файл, или перетащите изображение на страницу — поддерживаются JPG, PNG, WebP, GIF, до 20 МБ, обработка одного изображения за раз.
-
2
Наведите курсор или палец для позиционирования
Двигайте курсор по изображению — лупа в реальном времени показывает увеличенные пиксели вокруг, красная рамка отмечает нужную точку.
-
3
Нажмите, чтобы считать цвет
Нажмите на нужную точку или отпустите палец, чтобы считать цвет — сразу отобразятся значения HEX, RGB, HSL.
-
4
Скопируйте код цвета
Нажмите на кнопку копирования рядом с нужным форматом, чтобы скопировать код цвета в буфер обмена.
Техническое пояснение
Что важно знать про локальное определение цвета
01
Считывается реальный пиксель в исходном разрешении изображения
Изображение сначала декодируется в браузере и отрисовывается на холсте с разрешением, точно совпадающим с оригиналом — то, что видно на странице, это просто уменьшенное отображение этого холста. При нажатии для считывания цвета положение на экране пересчитывается в реальные пиксельные координаты холста — поэтому независимо от того, насколько маленьким показано изображение на странице, точность считывания цвета всегда соответствует исходному разрешению изображения, без искажений от масштабирования отображения.
02
Почему пипетка не поддерживает пакетную обработку и не создаёт файлы для скачивания
Функция пипетки — «считать цвет одного пикселя по нажатию», это чисто интерактивный инструмент просмотра, который сам по себе не создаёт никаких файлов для скачивания, соответственно, отсутствует и семантика «пакетной обработки нескольких изображений с отдельными результатами». Если нужно получить цвет из нескольких изображений, просто загружайте их по очереди — при переключении на новое изображение текущая история выборов очищается.
Частые вопросы
Что чаще всего спрашивают про онлайн-пипетку
Поддерживает ли пипетка пакетную обработку?
Пипетка — это интерактивная функция просмотра, которая считывает цвет одного пикселя по нажатию, сама по себе не создаёт файлов для экспорта, поэтому понятие «пакетная обработка» здесь не применимо — независимо от размера загруженного изображения, вы каждый раз нажимаете на конкретную точку, чтобы получить цвет. Поэтому инструмент поддерживает загрузку только одного изображения и не предоставляет пакетный режим.
Определение цвета происходит на моём компьютере или телефоне, или файл загружается на сервер?
Полностью происходит в браузере на вашем текущем устройстве — с помощью встроенной возможности Canvas браузера читать пиксели напрямую из данных изображения считывается цвет в нужной позиции; оригинал никогда не загружается на какой-либо сервер.
Почему цвет в лупе может немного отличаться от итогового считанного значения?
В лупе показан увеличенный вид небольшой области вокруг текущего положения курсора, а реально считывается цвет одного конкретного пикселя, отмеченного красной рамкой; если на изображении есть градиент или шум, соседние пиксели могут немного отличаться по цвету — если ориентироваться именно на пиксель, отмеченный красной рамкой, цвет будет считан точно, без отклонений.
Сохраняется ли история выбранных цветов, останется ли она после обновления страницы?
История выбора сохраняется только в памяти браузера текущей страницы — это удобно для сравнения нескольких считанных цветов в рамках одной сессии; при обновлении или закрытии страницы история очищается и не сохраняется постоянно и не загружается никуда. Если нужно надолго сохранить какой-то цвет, скопируйте и вставьте его в свои заметки или дизайн-инструмент.
Какой из трёх форматов — HEX, RGB, HSL — использовать?
HEX (например, #FF3B30) — самый распространённый формат в веб-разработке и большинстве дизайн-инструментов, компактный и удобный для вставки; RGB (например, rgb(255, 59, 48)) удобнее, когда нужно отдельно посмотреть или изменить значения красного, зелёного и синего каналов; HSL (например, hsl(4, 100%, 59%)) описывает цвет через оттенок, насыщенность и светлоту — удобнее, когда нужно менять насыщенность или светлоту в рамках того же оттенка. Все три формата описывают один и тот же цвет — выбирайте нужный в зависимости от инструмента или кода, куда собираетесь его вставить.
Насколько точна пипетка, можно ли получить настоящий исходный цвет изображения?
Да. Пипетка считывает необработанные пиксельные данные декодированного изображения, независимо от размера отображения на странице — даже если изображение показано на странице в уменьшенном виде, определение цвета всегда идёт по реальному разрешению самого изображения, точно считывая цвет соответствующей позиции, без искажений из-за масштабирования отображения.
Загрузите изображение прямо сейчас — получите точный код цвета за несколько секунд
Без регистрации, без ожидания — нажмите и сразу скопируйте.