VLADISLAV KASATKIN

ИНСТРУМЕНТ ДЛЯ ДИЗАЙНА

Пипетка онлайн: определить цвет по изображению

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

КАК УЗНАТЬ ЦВЕТ

Узнать цвет по фото или скриншоту

Нужно узнать цвет по фото, взять цвет с изображения или получить цвет со скриншота? Загрузите файл или вставьте снимок экрана. Онлайн-пипетка определит цвет выбранного пикселя и покажет готовые значения HEX, RGB и HSL, которые можно скопировать в CSS, макет или графический редактор.

  1. 01

    Загрузите изображение

    Выберите фото или вставьте скриншот из буфера обмена.

  2. 02

    Выберите пиксель

    Кликните по нужной точке изображения, чтобы взять её цвет.

  3. 03

    Скопируйте код

    Скопируйте HEX, RGB или HSL и используйте результат в работе.

Перетащите изображение сюда

Как использовать:

  1. Загрузите изображение любым способом
  2. Кликните на него для выбора цвета
  3. Скопируйте значения из панели справа
  4. Просмотрите историю или сгенерируйте новую палитру

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

HEX

#------

Web-safe HEX

#------

RGB

rgb(--, --, --)

HSL

hsl(--, --%, --%)

CMYK

cmyk(--%, --%, --%, --%)

История

Нет цветов

Пиксель → код

Код цвета для сайта и дизайна

После выбора пикселя результат появляется в блоке «Выбранный цвет». Используйте HEX для CSS и веб-дизайна, RGB для экранных цветов, а HSL для точной настройки оттенка, насыщенности и светлоты. Дополнительно доступны CMYK и Web-safe HEX.

HEX

Удобен для CSS и интерфейсов

RGB

Значение для экранных цветов

HSL

Настройка оттенка и светлоты

Пример изображения для выбора цвета пикселя
Точка на изображении выбрана условно. Пипетка возвращает готовый код, например#16171B иrgb(22, 23, 27), который можно скопировать.

Если код уже известен и его нужно перевести между HEX, RGB, HSL или CMYK, откройтеконвертер цветов.

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

Помощь

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

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

Как узнать цвет по фото или скриншоту?
Загрузите фото, картинку или скриншот из буфера обмена, затем кликните по нужной точке изображения. Онлайн-пипетка определит цвет выбранного пикселя и покажет его код. Для точного результата выбирайте участок без тени, блика или границы между объектами: соседние пиксели могут иметь разные оттенки.
Как взять цвет с изображения для сайта или дизайна?
Загрузите изображение, выберите пиксель на нужной области и скопируйте подходящее значение. HEX удобно использовать в CSS, RGB — при работе с экранными цветами, а HSL — для дальнейшей настройки оттенка, насыщенности и светлоты.
В каких форматах отображается выбранный цвет?
Основные результаты — HEX, RGB и HSL. Они подходят для веб-разработки, интерфейсов, макетов и графических редакторов. Дополнительно инструмент показывает Web-safe HEX и CMYK. Печатный цвет CMYK стоит проверить в нужном цветовом профиле перед отправкой макета в типографию.
Можно ли выбрать цвет с экрана?
Да, если браузер поддерживает системную функцию EyeDropper, используйте кнопку «Пипетка экрана» и выберите цвет в любом месте экрана. Если такой кнопки нет, сделайте скриншот, загрузите его или вставьте из буфера, а затем выберите пиксель на изображении.
Как скопировать код цвета?
После выбора пикселя откройте блок «Выбранный цвет». Рядом с HEX, RGB, HSL и другими значениями находится кнопка копирования. Нажмите её, чтобы перенести код в CSS, Figma, графический редактор или текстовый документ.
Можно ли создать палитру из фотографии?
Да. После загрузки изображения пипетка автоматически предлагает несколько цветов из его содержимого. Нажмите «Новая палитра», чтобы получить другой вариант, а затем выберите любой цвет для просмотра и копирования его кодов.
Сохраняется ли история выбранных цветов?
Последние выбранные цвета сохраняются локально в браузере, чтобы к ним можно было вернуться во время работы. История не отправляется на сервер и содержит до 10 значений. Её можно очистить кнопкой «Очистить».
Обрабатывается ли изображение в браузере?
Да. Файл читается на странице, а цвет берётся непосредственно из изображения через canvas. Фото и скриншот не отправляются на внешний API. Поддерживаются изображения, которые может открыть браузер, включая распространённые JPG, PNG и WebP.

ДЛЯ ПРОДУКТИВНОЙ РАБОТЫ

Другие инструменты, которые вам могут пригодиться:

Работайте с текстом, форматированием или нейросетями.