tigtools

Выбор цвета из изображения

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

Работает в браузере Без регистрации

JPEG, PNG, WebP, GIF, AVIF или BMP, до 25 МБ. Изображение остаётся на вашем устройстве.

Как пользоваться

  1. Выберите изображение или перетащите его в поле.
  2. Наведите указатель на изображение — увеличитель покажет пиксели вокруг него.
  3. Нажмите или коснитесь, чтобы выбрать цвет и скопировать его в HEX, RGB или HSL.
  4. Прокрутите вниз, чтобы увидеть доминирующие цвета, выберите нужное количество и скопируйте их или скачайте как CSS-переменные.

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

Изображение рисуется на canvas в вашем браузере, и из него считывается цвет точно того пикселя, который находится под указателем. Лупа показывает увеличенную область 11 × 11 пикселей, выбранный пиксель обведён. Изображения со стороной больше 4096 пикселей сначала уменьшаются, поэтому на очень больших фотографиях один выбранный пиксель является средним значением нескольких исходных пикселей.

Доминирующие цвета определяются методом k-средних: пиксели сначала группируются в 32 768 небольших цветовых корзин, затем корзины объединяются в выбранное вами количество цветов с учётом количества пикселей в каждой. Начальные точки выбираются детерминированно, поэтому одно и то же изображение всегда даёт одну и ту же палитру.

Цвета считываются в цветовом пространстве sRGB, которое браузер использует для отображения. Если в изображение встроен широкий цветовой профиль, значения могут немного отличаться от тех, что показывает фоторедактор. В поддерживающих это браузерах (Chrome и Edge на компьютере) кнопка «Взять с экрана» использует встроенный EyeDropper, чтобы взять цвет из любого места на экране.

Примеры

Подбор фирменного цвета

Загрузите скриншот логотипа, щёлкните по его основному цвету и скопируйте #1a73e8 или rgb(26, 115, 232) в свой CSS.

Палитра из фотографии

Фотография пляжа, разложенная на 6 цветов, даёт тона песка, моря и неба; для каждого показана доля изображения, которую он занимает, от наибольшей к наименьшей.

Проверка оттенка

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

Часто задаваемые вопросы

Почему цвет немного отличается от цвета в моём фоторедакторе?

Браузеры преобразуют изображения в sRGB для отображения. Фотографии с широким цветовым профилем (Display P3, Adobe RGB) могут показывать немного другие значения в редакторе, который сохраняет исходный профиль.

Почему отсутствует кнопка «Выбрать с экрана»?

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

Как определяются доминирующие цвета?

С помощью кластеризации k-means всех пикселей с учётом частоты каждого цвета. Мелкие, но яркие детали могут объединяться с ближайшим более частым цветом; увеличьте количество цветов, чтобы разделить их.

Загружается ли изображение на сервер?

Нет. Он декодируется и анализируется этой страницей в вашем браузере и никогда не покидает ваше устройство.

Конфиденциальность

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