Цвет по картинке

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

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

Картинка для выбора цвета

Выберите файл, кликните по нужной точке и скопируйте цвет в удобном формате.

Выбранный цветВыберите точку на изображении

Здесь появятся HEX, RGB, RGBA, HSL и координаты выбранного пикселя.

Палитра изображения

Палитра появится после загрузки картинки.

  • Цвет пикселяНажмите на любую точку картинки и получите значения для CSS, макета или редактора.
  • ПалитраПосле загрузки инструмент покажет заметные цвета изображения отдельными образцами.
  • КопированиеHEX, RGB, RGBA, HSL и координаты можно скопировать одной кнопкой.

Пипетка работает с изображениями, которые браузер может открыть в предпросмотре: JPG, PNG, WEBP и AVIF. Цвет выбирается на копии изображения в canvas, исходный файл не меняется.

Форматы цвета

Какие значения показывает пипетка

После выбора точки можно скопировать цвет для CSS, Figma, редактора изображений, документации или палитры бренда.

  • HEX и RGB

    HEX удобен для CSS и макетов, RGB показывает три цветовых канала в числах от 0 до 255.

  • RGBA и HSL

    RGBA сохраняет прозрачность PNG, а HSL помогает быстрее менять оттенок, насыщенность и светлоту.

  • Палитра картинки

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

Инструкция

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

Загрузите изображение, выберите пиксель и скопируйте нужное значение цвета.

  1. 1

    Загрузите картинку

    Выберите JPG, PNG, WEBP или AVIF. После загрузки появится предпросмотр изображения и блок палитры.

  2. 2

    Наведите пипетку

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

  3. 3

    Скопируйте значение

    Скопируйте HEX, RGB, RGBA, HSL или координаты выбранной точки кнопкой рядом со значением.

  4. 4

    Используйте палитру

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

Что учитывать

  • Пиксель может отличаться от соседних

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

  • Копируйте нужный формат

    Для CSS чаще подходят HEX, RGB или HSL. Если важна прозрачность, используйте RGBA.

  • Формат изображения

    Пипетка работает по предпросмотру файла. Если браузер не может открыть изображение, сохраните его в JPG, PNG, WEBP или AVIF.

Когда использовать

Для каких задач нужна пипетка цвета

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

  • Собрать палитру

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

  • Узнать цвет элемента

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

  • Передать цвет без ошибки

    Скопируйте значение вместо ручного переписывания, чтобы не потерять символы HEX или числа RGB.

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

Короткие ответы о выборе цвета по картинке, кодах HEX/RGB/HSL, прозрачности и палитре.

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

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

Можно узнать палитру картинки?

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

Пипетка показывает прозрачность?

Да, если в пикселе есть прозрачность, она отражается в RGBA. HEX, RGB и HSL показывают сам оттенок без отдельного альфа-канала.

Какие изображения можно загрузить?

Подходят JPG, PNG, WEBP и AVIF, если браузер может открыть файл в предпросмотре.

Можно скопировать код цвета?

Да. Рядом с HEX, RGB, RGBA, HSL и координатами есть кнопка копирования.