Что такое выборщик цвета изображения?

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

Описание инструмента

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

Возможности

  • Выбор цветов из изображений PNG, JPEG, WebP, GIF, BMP и AVIF или вставка изображения с помощью Ctrl+V
  • Увеличительная лупа с отображением цвета под указателем
  • Увеличение до 3200% с чётким отображением пикселей для мелких деталей и значков
  • Точечная выборка или усреднение области размером от 3 × 3 до 101 × 101 пикселя, как в пипетке графических редакторов
  • Копирование каждого цвета в форматах HEX, RGB, HSL, HWB, CMYK, LAB и других форматах
  • Пронумерованные маркеры на изображении для каждой выбранной точки
  • Отображение непрозрачности полупрозрачных пикселей
  • Перемещение последней точки по одному пикселю с помощью клавиш со стрелками

Как это работает

Изображение декодируется в вашем браузере и рисуется на canvas, после чего цвет считывается из пикселей canvas. Цвета преобразуются в sRGB — цветовое пространство веба, поэтому значения соответствуют тому, как изображение выглядит на странице, и могут использоваться в CSS без изменений. При усреднении выборки цвета пикселей в области усредняются с учётом непрозрачности, поэтому прозрачные пиксели не затемняют результат. Изображение никогда не загружается на сервер.

Советы

  • Фотографии и изображения JPEG содержат шум, поэтому соседние пиксели часто немного отличаются. Используйте усреднение области 3 × 3 или 5 × 5, чтобы получить видимый цвет, а не цвет одного зашумлённого пикселя.
  • Для плоской графики, например логотипов, значков и скриншотов, используйте точечную выборку, чтобы получить точный цвет.
  • Изменение размера выборки обновляет цвета всех уже выбранных точек.
  • Для файлов GIF цвета выбираются из первого кадра.