Пипетка онлайн: цвет по картинке и палитра

Откройте картинку, кликните в любом месте, чтобы взять точный цвет под курсором, и скопируйте значение HEX, RGB или HSL. Инструмент также автоматически собирает палитру основных цветов. Изображение читается прямо с холста в вашем браузере и никуда не отправляется.

Перетащите сюда изображение или нажмите, чтобы выбрать файл

Поддерживаются JPG, PNG, WebP и GIF. Файлы остаются на вашем устройстве.

Кликните по изображению, чтобы выбрать цвет. Наведите курсор, чтобы увидеть цвет до клика.

Выбранный цвет

Палитра

Цвета считываются прямо из пикселей изображения вашим браузером через Canvas API. Сама картинка никогда не загружается на сервер.

Точный цвет с любого изображения

Дизайнерам и разработчикам постоянно нужен точный цвет пикселя: синий в логотипе, фон скриншота, акцентный цвет на фото. Эта пипетка для изображений превращает картинку в кликабельный холст, показывает цвет под курсором в трёх популярных форматах и позволяет скопировать любой из них одним кликом. Кроме того, инструмент сканирует всё изображение и строит палитру самых частых цветов, так что готовую цветовую схему можно взять прямо с картинки-образца.

С ним удобно подбирать фирменные цвета, восстанавливать тему по скриншоту, брать оттенки с фото для дизайна или извлекать цветовую схему из рисунка.

Как определить цвет

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

Три формата цвета

Каждый выбранный цвет показывается в HEX для CSS и графических редакторов, в RGB для кода и в HSL для настройки тона, насыщенности и яркости. Копируйте тот формат, который нужен вашему проекту.

Автоматическая палитра

Инструмент анализирует изображение и группирует похожие оттенки, чтобы выделить преобладающие цвета. Вы сразу получаете палитру, которую можно взять для цельного дизайна.

Пиксели читаются локально

Изображение рисуется на холсте в вашем браузере, и цвета считываются оттуда. Ничего не загружается, поэтому личные макеты и скриншоты остаются на вашем компьютере.

Почему удобно пользоваться

  • Копирование в один клик: HEX, RGB или HSL мгновенно.
  • Палитра за секунды: основные цвета любого изображения, готовые к использованию.
  • Без загрузки: пиксели читаются в вашем браузере и остаются приватными.
  • Бесплатно: без аккаунта и без водяных знаков.
  • Любое устройство: клик на компьютере или касание на телефоне.

Для чего нужна пипетка

Чаще всего этот инструмент открывают, чтобы узнать HEX-код цвета, который виден на фото или скриншоте. Добавьте логотип и кликните по знаку, чтобы получить точный фирменный цвет, или кликните по фону скриншота, чтобы подобрать цвет сайта под изображение, с которым вы работаете. Каждый выбор сразу даёт значение в трёх форматах: HEX-код вроде #1A73E8 для CSS или графического редактора, строку RGB вроде rgb(26, 115, 232) для кода и строку HSL для настройки тона, насыщенности и яркости. Рядом с каждым значением есть кнопка копирования, так что узнать RGB-значение пикселя можно за один клик.

Это также быстрый способ составить палитру по картинке. Когда изображение загрузится, инструмент прочитает пиксели и покажет до восьми самых частых цветов в виде образцов, под каждым из которых указан HEX-код. Кликните по образцу, чтобы вывести этот цвет в основное поле, или кликните по коду, чтобы сразу скопировать его в буфер обмена. Так легко взять цветовую схему из рисунка, фото или мудборда или подобрать набор подходящих оттенков с картинки-образца без догадок.

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

Откройте изображение и кликните по нужному месту. Цвет этого пикселя появится в форматах HEX, RGB и HSL, у каждого есть кнопка копирования.

Да. Как только изображение загрузится, инструмент проанализирует его и покажет палитру самых частых цветов. Кликните по любому образцу, чтобы скопировать его HEX.

Нет. Картинка рисуется на холсте в вашем браузере, и значения цветов считываются оттуда. Файл никогда не отправляется на сервер.

Это три способа записать один и тот же цвет. HEX часто используется в CSS, RGB перечисляет значения красного, зелёного и синего, а HSL описывает тон, насыщенность и яркость, что удобно для подбора оттенков.

Да. Коснитесь изображения, чтобы взять цвет. Инструмент работает в мобильном браузере без приложений.

Инструмент читает точное значение пикселя из данных изображения, поэтому цвет берётся прямо из источника, а не вычисляется приблизительно.

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

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

Откройте изображение и кликните по нужному месту. Поле HEX покажет код этого пикселя, например #1A73E8, а кнопка "Копировать" рядом поместит код в буфер обмена, чтобы вставить его в CSS или графический редактор.

Кликните по пикселю на изображении и посмотрите поле RGB: там цвет записан как rgb(красный, зелёный, синий), например rgb(26, 115, 232). Нажмите кнопку "Копировать", чтобы взять значение. Тот же цвет показывается и в HEX, и в HSL.

Откройте изображение логотипа и кликните прямо по цветной части знака. Выбранный цвет появится в HEX, RGB и HSL с кнопками копирования, так что вы получите точный фирменный цвет. Автоматическая палитра рядом также покажет основные цвета логотипа в виде образцов, которые можно скопировать.

Да. Картинка рисуется на холсте в вашем браузере, и цвета считываются прямо из пикселей. Ничего не отправляется на сервер, поэтому файл не покидает ваше устройство.

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