Пипетка цвета по изображению
Берите цвета с любого изображения щелчком по пикселю. Лупа показывает точные пиксели, а вы получаете значения HEX, RGB и HSL и историю выбранных цветов.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Похожие Инструменты
Просмотреть ВсеЧто такое Пипетка цвета по изображению?
Загрузите или вставьте изображение и щёлкните любую точку, чтобы прочитать точный цвет пикселя в виде HEX, RGB (или RGBA для полупрозрачных) и HSL. Лупа показывает пиксели вокруг курсора, поля X/Y позволяют указать точный пиксель, а каждый выбранный цвет сохраняется в истории, по которой можно щёлкать.
Как пользоваться Пипетка цвета по изображению
- Перетащите, выберите или вставьте изображение (хорошо работает скриншот, вставленный через Ctrl+V).
- Наведите указатель на изображение, чтобы увидеть увеличенный вид, и щёлкните, чтобы взять цвет.
- Либо введите точные координаты пикселя X и Y.
- Нажмите на значение HEX, RGB или HSL, чтобы скопировать его; прежние цвета берите из списка Выбранные цвета.
Пример
40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
Когда использовать Пипетка цвета по изображению
Используйте, чтобы подобрать фирменный цвет по логотипу или скриншоту, взять цвета с фото для дизайна или проверить точный цвет элемента интерфейса. Учтите, что сжатие JPEG и сглаживание слегка меняют цвета пикселей, поэтому берите цвет с однотонных областей, а не с краёв. Чтобы получить сразу всю палитру, используйте инструмент «Палитра цветов из изображения».
Как работает Пипетка цвета по изображению
Изображение рисуется на canvas в полном разрешении, а его пиксели один раз читаются через getImageData. Щелчок переводится из экранных координат в координаты пикселя изображения, а значение RGBA по этому индексу преобразуется в HEX и HSL (оттенок в градусах, насыщенность и яркость в процентах). Лупа перерисовывает окрестность 11×11 пикселей без сглаживания.
Распространенные Случаи Использования
- Найти код HEX фирменного цвета на логотипе.
- Взять цвет со скриншота сайта для повторного использования в CSS.
- Проверить, действительно ли два элемента интерфейса используют один цвет.
- Собрать цвета с фото для мудборда.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Почему цвет немного отличается от ожидаемого?
Форматы с потерями вроде JPEG и сглаживание на краях меняют значения пикселей. Берите цвет из середины однотонной области или выберите точный пиксель в полях X/Y.
Работает ли это с изображениями с прозрачностью?
Да. Полупрозрачные пиксели показываются как rgba() со значением альфа; значение HEX отображает часть RGB.
Можно ли брать цвета за пределами браузера?
Нет, только с загруженного изображения. Сделайте скриншот и вставьте его через Ctrl+V, чтобы взять цвет с любого места экрана.