Нужен точный цвет с логотипа, скриншота, фото или дизайн-референса? Загрузите изображение, поводите курсором для предпросмотра цвета под лупой и кликните, чтобы сохранить его. Каждый сохранённый цвет показывает HEX, RGB и HSL с кнопками копирования в один клик.
Он читает пиксели прямо с изображения в вашем браузере, поэтому выбор мгновенный, а файл не загружается на сервер — удобно для брендовых цветов, которые вы предпочли бы не отправлять на случайный сайт.
Как пользоваться
- Добавьте изображениеПеретащите картинку или скриншот, с которого хотите взять цвета.
- Наведите и кликнитеЛупа увеличивает точный пиксель; кликните, чтобы сохранить цвет.
- Скопируйте значениеВозьмите HEX, RGB или HSL для каждого сохранённого цвета.
Иногда нужен один цвет из изображения, и ничто другое не подойдёт — тот самый синий в логотипе, серый за кнопкой на скриншоте, оттенок на фотографии, который вы хотите переиспользовать. Ваш глаз не может считать hex-код с экрана, а цвет, который выглядит верным, обычно на несколько цифр отличается. Этот пипетка позволяет загрузить изображение, водить по нему лупой-увеличителем, увеличивающей пиксели под курсором, и кликнуть, чтобы сохранить именно тот, что вам нужен, как образец — HEX, RGB и HSL показаны вместе, каждый с кнопкой копирования.
Он читает пиксели локально в вашем браузере с canvas: ничего не загружается на сервер, нет аккаунта, а после первой загрузки он работает офлайн. Это важно, когда изображение — невыпущенный макет, брендовый ассет клиента или внутренний скриншот. Это точечный сэмплер — каждый клик читает один пиксель, что как раз верно для чистого логотипа или плоского UI и требует чуть больше внимания на зашумлённой фотографии. Если вы предпочли бы, чтобы доминирующие цвета всего изображения вытянулись автоматически, для этого есть отдельный инструмент палитры; этот же — для наведения на конкретный пиксель и взятия его значения.
Для чего это используют
Восстановите точный цвет бренда со старого логотипа, когда спецификации нет
Подберите кнопку или заголовок под цвет на скриншоте понравившегося сайта
Вытяните основной, акцентный и текстовый цвета с логотипа за один проход
Возьмите оттенок с фотографии, чтобы использовать как фон или акцент
Считайте реальный экранный цвет полупрозрачного элемента со скриншота
Скопируйте цвет как HSL, чтобы осветлить или приглушить его для состояния наведения или варианта
Когда нужен точный цвет, а не цвет, который близок
Вы пересобираете бренд, и единственный референс — старый логотип. Вы подгоняете кнопку под скриншот сайта, который вам нравится. Вы приметили оттенок в фото и хотите использовать его в своём дизайне. В каждом случае проблема одна: ваш глаз не может считать HEX-код с экрана. «Тот бирюзовый» — на самом деле дюжина слегка разных бирюзовых, а мониторы сдвигают их дальше. Вам нужно число, которое пиксель действительно содержит.
Это и делает этот инструмент. Загрузите изображение, поводите по нему, и лупа-луп следует за курсором, показывая пиксели под ним, увеличенными, чтобы вы могли попасть на точно нужный. Кликните — и этот цвет сохраняется как образец. Каждый образец перечисляет своё значение HEX, RGB и HSL с кнопкой копирования рядом с каждым, так что вы идёте прямо от пикселя в изображении к коду в вашем буфере обмена.
Изображение никогда не покидает вашу машину. Пиксели читаются локально в браузере с холста — ничего не загружается, нет аккаунта, и как только страница загружена, она продолжает работать с выключенной сетью. В этом суть, когда «изображение» — это невыпущенный макет, брендовый ассет клиента или внутренний скриншот, который не стоит отдавать случайному веб-инструменту.
Как это работает на практике
- Лупа — для точности. У логотипов и интерфейсов жёсткие края, где цвет меняется на одном пикселе, — сглаживание означает, что соседний пиксель это мутная смесь. Увеличенный вид позволяет увидеть, на каком именно пикселе вы находитесь, прежде чем зафиксировать, так что вы берёте ровный брендовый цвет, а не край.
- Каждый клик сохраняет образец. Взятие пробы не «один за раз и исчез». Кликайте по изображению, и каждый цвет складывается в список, так что можно вытащить основной цвет логотипа, его акцент и цвет текста за один проход и сравнить их рядом.
- Три формата, один выбор. Каждый образец показывает HEX, RGB и HSL сразу. Вы не берёте пробу заново, чтобы сменить формат, — тот же цвет уже лежит там во всех трёх, каждый со своей кнопкой копирования.
HEX, RGB, HSL — что копировать
Это три способа записать один и тот же цвет, и правильный зависит от того, куда он идёт.
- HEX (
#3A7BD5) — вариант по умолчанию для веба: CSS, большинство дизайн-инструментов, брендбуки. Компактен и вставляется повсеместно. Копируйте это, если нет причины не копировать. - RGB (
rgb(58, 123, 213)) прописывает красный, зелёный и синий каналы. Полезно, когда инструменту нужны значения каналов, когда вам нужна альфа (rgba) или когда вы рассуждаете о том, как смешан цвет. - HSL (
hsl(215, 65%, 53%)) описывает тон, насыщенность и светлоту. Это тот, к которому тянуться, когда вы хотите подстроить цвет, а не просто переиспользовать его, — подвиньте светлоту для состояния наведения, убавьте насыщенность для приглушённого варианта, сохраните тон и постройте шкалу.
Один честный предел и родственный инструмент
Это точечный сэмплер: каждый клик читает один пиксель. На чистом логотипе или ровном интерфейсе это ровно то, что нужно. На шумном фото — зерно, градиенты, артефакты JPEG — два соседних пикселя могут различаться, так что берите из ровной области и используйте лупу, чтобы не попасть на выброс. Кисти усреднения области здесь нет.
А если вы вообще не хотите выбирать вручную, у img.diy есть отдельный инструмент палитры, который сканирует всё изображение и выдаёт его доминирующие цвета автоматически. Эти два отвечают на разные вопросы. Инструмент палитры говорит, из каких цветов состоит это изображение; пипетка цвета позволяет указать на один конкретный пиксель — это точное место на логотипе, ту самую кнопку — и взять его значение. Берите инструмент палитры, чтобы обобщить изображение, а этот — когда вы уже знаете нужную точку.
Загрузите изображение, наведитесь, чтобы найти пиксель, кликните, чтобы сохранить его, скопируйте нужный формат.
Почему IMG.DIY
Увеличительная лупа
Приближает, чтобы вы кликнули точно в пиксель.
HEX / RGB / HSL
Каждый сохранённый цвет в трёх форматах.
Копирование в один клик
Копируйте любое значение прямо в буфер обмена.
Приватно
Пиксели читаются локально — без загрузки на сервер.