Как узнать HEX-код цвета по фото и скриншоту

Краткий ответ

Откройте фото или скриншот в Color Identifier и перетащите пипетку на ровный участок нужного цвета. Приложение считывает ровно один пиксель и показывает его HEX, RGB, HSB и CMYK, а заодно ближайший именованный цвет; кнопка Copy Hex копирует код вида #3A7BD5. Сделайте два-три замера рядом: если коды почти совпадают, цвет определён надёжно. Выбор цвета на фото входит в Pro.

Скриншот или оригинал — лучший источник

Самые точные коды даёт скриншот сайта или приложения: каждый его пиксель — ровно тот цвет, который вывел экран, без пересчёта и шумов. Хотите узнать цвет кнопки на чужом сайте или фирменный оттенок из презентации — сделайте скриншот и откройте его в приложении прямо из галереи.

С фотографиями сложнее. Картинка, отправленная в Telegram «как фото», в WhatsApp или во ВКонтакте, сжимается заново, а JPEG-сжатие размазывает цвет по соседним пикселям: участок, который в оригинале был #3A7BD5, после пересылки может читаться как #3C7AD2. Если нужен точный код, попросите прислать изображение файлом — тогда оно дойдёт без пережатия.

Ещё один нюанс касается меню «Поделиться». Если отправить картинку в приложение из другой программы, она пересохраняется в JPEG, и значения пикселей могут чуть сдвинуться. Для точного кода со скриншота выбирайте изображение из «Фото» уже внутри Color Identifier.

Ставьте пипетку на заливку, а не на край

Пипетка берёт один-единственный пиксель, поэтому место важно. Края букв, иконок и линий на скриншотах сглажены: пиксели там — смесь цвета объекта и фона, и код окажется где-то посередине. Цельтесь в середину сплошной заливки: в тело кнопки, в широкую плашку, в фон под текстом.

Увеличительного стекла в приложении нет. Если нужная деталь мелкая — тонкая полоска логотипа или значок в меню, — сначала обрежьте изображение в «Фото», чтобы этот участок занял весь экран. После этого попасть в него пальцем несложно.

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

Куда вставлять скопированный код

Copy Hex кладёт в буфер обмена код вроде #94766C. В Figma его вставляют в поле цвета заливки, в Tilda — в настройки цвета блока или кнопки, в Canva — в поле HEX при выборе нового цвета, в CSS — как есть: color: #94766C. В PowerPoint и Word откройте «Другие цвета»: там есть поле для шестнадцатеричного кода.

Copy RGB даёт тот же цвет тремя числами в виде «R: 148, G: 118, B: 108». Это удобно для программ, которые просят красный, зелёный и синий по отдельности; в CSS такая запись выглядит как rgb(148, 118, 108). У каждой строки значений в карточке цвета есть собственная кнопка копирования, поэтому HSB и CMYK тоже не придётся перепечатывать.

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

Почему код отличается на пару единиц

Два замера одного и того же цвета редко совпадают до символа, и это нормально. Сжатие, масштабирование и цветовой профиль меняют отдельные пиксели. Кроме того, снимки iPhone часто хранятся в расширенном пространстве Display P3, а большинство веб-инструментов рассчитаны на sRGB. Разница в несколько единиц в одном канале на глаз не видна.

Если же код прыгает сильно — скажем, с #94766C на #6E5249, — вы, скорее всего, задели тень, отражение или границу двух областей. Сдвиньте пипетку чуть в сторону и повторите замер, прежде чем вносить значение в брендбук или таблицу стилей.

HEX, RGB, HSB и CMYK: что когда нужно

HEX — это те же три числа RGB, только записанные в шестнадцатеричной системе: в #94766C пара 94 означает красный канал (148), 76 — зелёный (118), 6C — синий (108). HEX нужен для веба и большинства дизайн-программ, RGB — там, где просят три числа, HSB — когда хочется вручную сделать цвет светлее или насыщеннее. CMYK годится как отправная точка для печати, но тираж всё равно сверяют по пробному оттиску.

Если найденный цвет нужно слегка подправить, кнопка Adjust открывает ползунки RGB и HSB и сохраняет результат как новый цвет, а исходный замер остаётся нетронутым.

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

Можно ли узнать HEX-код цвета со скриншота?

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

Почему код меняется, если чуть сдвинуть пипетку?

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

Это настоящий цвет предмета на фото?

Это цвет предмета на конкретном снимке. Освещение, баланс белого и фильтры меняют то, как камера его записала, поэтому код подходит, чтобы повторить цвет картинки, но не заменяет измерение самого предмета.

Как перевести HEX в RGB?

Каждая пара символов HEX — это один канал в шестнадцатеричной записи: #3A7BD5 соответствует 58, 123, 213. Считать вручную не нужно: Copy RGB сразу копирует все три числа.

Что доступно без Pro?

Без Pro пипеткой можно сделать два замера за сеанс, но название и код при этом скрыты. Просмотр библиотеки именованных цветов и копирование их кодов бесплатны.

Фото куда-нибудь загружается?

Нет. Цвет считывается и получает название прямо на iPhone или iPad, аккаунт не нужен.