Пипетка цвета по изображению

Как узнать код цвета на фотографии

Пипетка выбирает розовый участок изображения рядом с образцами цвета

Пипетка цвета читает одну точку изображения и показывает её цвет числами. Загрузите фотографию, нажмите на нужный участок и скопируйте HEX или RGB. Так можно подобрать фон карточки под снимок товара, повторить оттенок из макета или проверить, действительно ли угол картинки белый. Для точного выбора доступны координаты: горизонтальная x и вертикальная y.

Результат относится к конкретному пикселю, маленькой ячейке цифровой картинки. Он не описывает весь предмет на фотографии. У красной чашки освещённая сторона, блик и тень дадут разные коды. Для подбора палитры попробуйте несколько точек на ровном участке, подальше от границы предмета. Единственный клик по блику легко превратит красную чашку в почти белый образец.

Что означают HEX и RGB

RGB задаёт количество красного, зелёного и синего в цвете. Здесь каждый канал записан целым числом от 0 до 255. Например, rgb(255, 0, 128) содержит максимум красного, ноль зелёного и промежуточное значение синего. У белого все три канала равны 255, у чёрного они равны нулю. Это значения экранного цвета, а не рецепт смешивания красок.

HEX записывает те же три канала шестью шестнадцатеричными знаками после решётки. Каждая пара обозначает один канал: сначала красный, затем зелёный и синий. В шестнадцатеричной записи после цифры 9 идут буквы A, B, C, D, E и F. Поэтому 255 превращается в FF, 0 в 00, а 128 в 80. Цвет rgb(255, 0, 128) получает код #FF0080. Регистр букв не меняет оттенок.

Для переноса в веб-макет обычно достаточно HEX. Если программа просит отдельные поля R, G и B, возьмите три числа из RGB. Чтобы перейти к тону, насыщенности и светлоте или изменить оттенок, используйте конвертер HEX, RGB и HSL. Сама пипетка читает существующий пиксель, а не исправляет баланс белого и не создаёт новую палитру автоматически.

Как выбрать точку без промаха

Начало координат находится в левом верхнем углу. Его адрес равен x = 0, y = 0. При движении вправо растёт x, при движении вниз растёт y. У файла шириной 1000 и высотой 500 пикселей последний столбец имеет номер 999, последняя строка имеет номер 499. Значения 1000 и 500 уже находятся за границей картинки.

Большое фото уменьшается только при показе на странице. Если исходник 1000 × 500 занимает на экране 500 × 250, один экранный пиксель соответствует двум исходным по каждой стороне. Нажатие в точке 250, 125 относительно левого верхнего угла выбирает исходные координаты 500, 250. Холст хранит исходное разрешение, поэтому пипетка читает его пиксель, а не цвет уменьшенного превью.

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

Примеры выбора цвета

Пример 1. Цвет фона карточки. На фотографии упаковки нужен розовый участок без блика. Выберите точку внутри заливки. Допустим, результат равен rgb(255, 0, 128) при непрозрачности 100%. Копируйте #FF0080 в поле фона макета. Проверьте соседние точки: если числа сильно отличаются, выбранный участок содержит градиент, текстуру или следы сжатия.

Пример 2. Проверка белого поля. У изображения 800 × 600 задайте x = 0, y = 0. Если результат #FFFFFF и непрозрачность 100%, выбранный угол белый. Затем проверьте x = 799, y = 599. Значение #FEFEFE означает каналы 254, 254, 254 и отличается от белого на единицу каждого канала. Проверка двух углов не доказывает однотонность всего фона.

Пример 3. Пиксель на уменьшенном фото. Файл 1000 × 500 показывается в области 500 × 250. Нажатие ровно посередине выбирает x = 500, y = 250. Нажатие на самый правый нижний край ограничивается точкой 999, 499. Для повторения результата в другой программе вводите координаты оригинала, а не размеры видимого прямоугольника.

Пример 4. Полупрозрачный значок. В PNG выбран красный пиксель с каналами 255, 0, 0 и альфа-каналом 128. Инструмент покажет #FF0000 и непрозрачность 50,2%: 128 / 255 × 100. На светлом фоне такой пиксель выглядит светлее непрозрачного красного. Перенос одного шестизначного HEX уберёт прозрачность, поэтому в макете отдельно задайте нужную непрозрачность.

Пример 5. Пустая область логотипа. Выберите точку за пределами рисунка внутри прозрачного PNG. При альфа-канале 0 результат сообщает «Прозрачный пиксель» и непрозрачность 0%. У него нет собственного видимого оттенка. Серо-белые клетки под ним принадлежат фону предпросмотра. Копировать их как цвет логотипа было бы ошибкой.

Почему один предмет даёт разные коды

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

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

Непрозрачность хранится отдельно от трёх цветовых каналов. Значение альфа-канала 255 означает полностью непрозрачный пиксель, 0 означает полностью прозрачный. Промежуточные значения смешивают цвет с фоном при показе. Полупрозрачный чёрный на белом выглядит серым, хотя его собственные каналы остаются нулевыми. Поэтому рядом с кодом всегда смотрите процент непрозрачности.

Какие файлы можно открыть

Поддерживаются JPEG, PNG и WebP размером до 20 МиБ, то есть 20 × 1024 × 1024 байт. Разрешение ограничено 16 миллионами пикселей, каждая сторона должна быть не длиннее 8192 пикселей. Например, 4000 × 4000 укладывается в предел площади, а 5000 × 4000 его превышает. Ограничения защищают память устройства: только четыре байта цвета на 16 миллионов пикселей требуют около 61 МиБ, ещё до дополнительных копий.

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

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

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

Можно ли по фотографии узнать точный цвет краски?

Фото зависит от освещения, камеры и обработки. Одинаковая стена в тени и на солнце даст разные RGB. Для выбора физической краски сравнивайте образец с веером при подходящем освещении. Код пикселя пригоден для экранного макета, но сам по себе не является номером краски.

Почему на краю буквы получился другой оттенок?

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

Почему код из скриншота отличается от CSS на сайте?

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

Можно ли получить средний цвет фотографии?

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

Чем прозрачность отличается от белого цвета?

Белый непрозрачный пиксель закрывает фон и содержит RGB 255, 255, 255. Полностью прозрачный пропускает фон независимо от скрытых цветовых каналов. Откройте картинку поверх тёмной подложки: прозрачная область покажет тёмный фон, а белая останется белой.

Почему после пересылки фотографии код изменился?

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

Можно ли выбрать цвет за пределами картинки?

Координаты относятся только к её собственной сетке. У файла 640 × 400 допустимы x от 0 до 639 и y от 0 до 399. Фон страницы и клетчатая подложка не входят в изображение. Для их цвета нужен отдельный скриншот с этим участком.

Есть что добавить?

Напишите своё мнение, комментарий или предложение.