Онлайн-пипетка
Перетащите изображение сюда
Поддерживаемые форматы: JPG, PNG, WebP, GIFНажмите в любом месте изображения, чтобы выбрать цвет
Нужно узнать, какой цвет использован в логотипе, на фотографии или на скриншоте? Загрузите изображение, наведите курсор на нужное место и кликните. Код цвета сразу окажется в буфере обмена в формате, который вы выберете сами: HEX, RGB, HSL, HSV или LCH. Ничего не нужно устанавливать, а изображение не покидает ваш компьютер.
Как узнать цвет из изображения
- Загрузите изображение. Перетащите его в окно или нажмите «Просмотреть файлы». Пипетка работает с JPG, PNG, WebP и GIF.
- Выберите формат. Над изображением укажите, в каком виде копировать цвет. Для веба обычно нужен HEX, для графических программ RGB. Инструмент запомнит ваш выбор.
- Наведите на цвет. Рядом с курсором появится лупа с увеличенными соседними пикселями, а под ней код цвета.
- Кликните. Код окажется в буфере обмена, а цвет сохранится во вкладке «Выбранные цвета». Останется вставить его туда, где он нужен.
Хотите попробовать другое изображение? Перетащите его прямо на текущее или удалите его значком корзины.
Что умеет онлайн-пипетка
Лупа, которая показывает каждый пиксель
Обычная пипетка показывает только цвет под курсором, и попасть в тонкий край буквы получается почти случайно. Наша лупа увеличивает область вокруг курсора до 11 × 11 пикселей и обводит рамкой центральный из них. Вы точно видите, куда собираетесь кликнуть, ещё до клика.
Зум до отдельных пикселей
Кнопками плюс и минус или колесом мыши с зажатым Ctrl можно приблизить изображение до 64 раз. При включённой сетке видны границы пикселей, поэтому у иконок, пиксель-арта или мелкого текста вы попадёте точно туда, куда нужно.
Цвет из оригинала, а не из уменьшенной копии
Многие онлайн-инструменты сжимают изображение и берут цвет из превью, где соседние пиксели сливаются друг с другом. Наша пипетка работает с изображением в полном разрешении (до 4096 px по длинной стороне), поэтому вы получаете настоящий цвет пикселя.
Копирование одним кликом
Не нужно выделять текст или переписывать числа. Каждый клик по изображению копирует код в выбранном формате. Если та же самая точка нужна вам ещё и в другой записи, в деталях цвета доступны все пять форматов, каждый со своей кнопкой копирования.
Палитра доминирующих цветов
Сразу после загрузки инструмент находит до восьми преобладающих цветов изображения и показывает их во вкладке «Доминирующие цвета». Почти одинаковые оттенки объединяются, поэтому в палитре не окажется пяти вариантов серого, а прозрачные участки PNG в подсчёт не попадают. Палитра пригодится как основа цветовой схемы для сайта, презентации или постов в соцсетях. Проверить, достаточно ли контраста у цветов без оттенка, можно через перевод изображения в оттенки серого.
Выбранные цвета всегда под рукой
Каждый цвет, на который вы кликнули, сохраняется во вкладке «Выбранные цвета» (последние 24). Так можно сравнить несколько точек изображения и в любой момент к ним вернуться. На большом экране панель с цветами расположена прямо рядом с изображением.
Зачем узнавать код цвета из изображения
- Сайты и приложения: клиент прислал логотип только в JPG, а вам нужен точный фирменный цвет для CSS. Если заодно нужна версия с прозрачным фоном, используйте удаление фона с изображения.
- Графика и соцсети: хотите, чтобы текст на посте сочетался с фотографией. Возьмите цвет прямо с неё.
- Презентации и документы: цвета фирменного логотипа задаются в PowerPoint, Google Slides или Canva через HEX или RGB.
- Проверка макета: на скриншоте можно проверить, действительно ли у кнопки в приложении тот цвет, который задан в дизайне. Размер экспортированных изображений заодно уточните в анализе размеров изображений.
- Интерьер и мода: есть фото ткани или стены, и нужен похожий оттенок. Код станет отправной точкой при подборе в каталоге красок.
Форматы цветов, которые возвращает пипетка
- HEX (
#1373b6): запись для HTML, CSS и большинства графических программ. - RGB (
rgb(19, 115, 182)): доля красного, зелёного и синего, каждая от 0 до 255. Как устроено аддитивное смешение цветов, рассказывает Википедия. - HSL (
hsl(205, 81%, 39%)): оттенок, насыщенность и светлота. Удобен, когда нужно быстро получить более светлый или тёмный вариант того же цвета. - HSV: оттенок, насыщенность и яркость, как в выборе цвета в Photoshop или GIMP. Разницу между HSL и HSV подробно объясняет Википедия (на английском).
- LCH: модель, которая ближе всего к тому, как цвет воспринимает человеческий глаз. Копируется в записи, которую понимает современный CSS (см. документацию MDN, на английском).
Пипетка определит цвет из изображения. Если его нужно доработать, перевести в другие форматы или подобрать к нему сочетающиеся оттенки, переходите в цветовой круг.
Часто задаваемые вопросы
Загружается ли моё изображение на сервер?
Нет. Изображение загружается и обрабатывается прямо в вашем браузере, никуда не отправляется, и после закрытия страницы от него ничего не остаётся. Пипетку можно спокойно использовать и для внутренних материалов или ещё не опубликованных макетов.Как узнать HEX-код цвета с фотографии?
Загрузите фотографию, оставьте над изображением выбранным формат HEX и кликните по нужному месту с цветом. Код, например#75dab2, сразу окажется в буфере обмена.
Почему цвет с фотографии отличается от того, что в реальности?
На фотографии цвет меняют освещение, баланс белого и сжатие. Пипетка возвращает именно тот цвет, который сохранён в файле. С фотографиями лучше кликнуть по нескольким местам и сравнить их во вкладке «Выбранные цвета». Если по коду вы подбираете краску для стены, воспринимайте его как ориентир.Работает ли пипетка на телефоне?
Да. На сенсорном экране достаточно коснуться нужного места на изображении, и код скопируется так же, как на компьютере. Лупа рядом с курсором на мобильных устройствах не отображается, поэтому для мелких деталей сначала увеличьте изображение.В чём разница между HEX и RGB?
Оба варианта описывают один и тот же цвет. RGB выражает его тремя числами от 0 до 255, а HEX записывает те же числа в шестнадцатеричной системе после знака #. Например,rgb(255, 87, 51) и #ff5733 обозначают один и тот же цвет.