Как узнать код цвета любого изображения

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

Разбираемся в форматах кода цвета

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

HEX и RGB представляют одну и ту же информацию в разных форматах — конвертация из одного в другой возможна всегда. HSL описывает цвет через оттенок, насыщенность и яркость, что более интуитивно для ручной настройки. CMYK используется исключительно для печати.

Метод 1: онлайн-экстрактор цветов (самый быстрый)

Чтобы определить доминирующие цвета всего изображения — или точно найти конкретный пиксель — онлайн-экстрактор цветов является самым прямым решением. Достаточно загрузить изображение, и инструмент автоматически определит самые распространённые цвета с готовыми к копированию кодами HEX.

Экстрактор цветов от ImageTools анализирует любое фото или изображение и возвращает доминирующие цвета с соответствующими кодами HEX. Всё работает прямо в браузере — изображение не покидает ваше устройство.

1. Откройте инструмент извлечения цветов.
2. Загрузите изображение или перетащите файл в указанную область.
3. Инструмент автоматически определяет самые распространённые цвета на изображении.
4. Кликните на любой цвет, чтобы скопировать код HEX.

Метод 2: используя пипетку браузера (Chrome DevTools)

Если цвет, который вы хотите определить, находится на сайте — на фоне страницы, на кнопке, на логотипе — в Chrome есть встроенный инструмент для этого.

1. Откройте сайт в Google Chrome.
2. Нажмите F12 (или щёлкните правой кнопкой мыши и выберите «Просмотреть код»).
3. На панели DevTools кликните на иконку курсора в левом верхнем углу (или нажмите Ctrl+Shift+C).
4. Наведите курсор на любой элемент страницы — DevTools покажет CSS-свойства, включая цвета в HEX или RGB.
5. Чтобы открыть визуальный выбор цвета, кликните на цветной квадрат рядом с любым значением цвета на панели CSS.

В DevTools Chrome также есть встроенный Color Picker: клик на цветной квадрат на панели стилей CSS открывает селектор, позволяющий перемещаться по спектру и видеть значения в HEX, RGB, HSL и HSLA одновременно.

Метод 3: пипетка в Canva

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

1. Выберите элемент, заливку которого хотите изменить (текст, фигуру или фон).
2. Кликните на цвет элемента на боковой панели, чтобы открыть селектор цвета.
3. В селекторе кликните на иконку пипетки (eyedropper).
4. Кликните на любую точку изображения на холсте, чтобы захватить точный цвет этого пикселя.
5. Код HEX появится в текстовом поле селектора.

Метод 4: пипетка в Photoshop и Illustrator

Photoshop

Открыв изображение, выберите инструмент Пипетка (горячая клавиша: I). Кликните на любую точку изображения — захваченный цвет отобразится в поле цвета на панели инструментов. Чтобы увидеть код HEX, дважды кликните на поле цвета (откроется Color Picker), и значение HEX появится в правом нижнем поле.

Illustrator

Открыв файл, выберите объект, а затем кликните на цвет заливки или обводки на панели инструментов. В открывшемся Color Picker код HEX находится в нижнем поле. Также можно использовать инструмент Пипетка (горячая клавиша: I) для захвата цвета с любой точки холста.

Метод 5: расширение браузера — ColorZilla

Расширение ColorZilla (доступно для Chrome и Firefox) добавляет постоянную пипетку в ваш браузер. Установив его, вы сможете:

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

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

Метод 6: приложение для захвата цвета на телефоне

Чтобы определить цвета физических объектов — цвет стены, продукта, упаковки — или изображений на телефоне, существуют специальные приложения:

• Color Grab (Android) — наведите камеру на любую поверхность и получите код HEX в реальном времени.
• Palette Cam (iOS/Android) — извлекает полную цветовую палитру из фото, снятых сейчас или из галереи.
• Canva (iOS/Android) — пипетка мобильной Canva работает с импортированными изображениями.

Как использовать извлечённые коды цвета

После определения кода HEX цвета самые распространённые применения:

В CSS / веб-разработке

Используйте прямо в коде: color: #3ecf8e; или background-color: #3ecf8e;. Для более светлых или тёмных вариантов используйте HSL — гораздо интуитивнее регулировать яркость, чем вручную подбирать значения HEX.

В Canva, Figma или Adobe

Вставьте код HEX в поле цвета любого элемента. Все основные дизайн-инструменты принимают HEX напрямую.

Для создания полной палитры

Определив базовый цвет, Генератор палитры цветов автоматически создаёт гармоничные сочетания — комплементарные, аналоговые, триадные и монохромные — со всеми кодами в HEX, RGB и HSL, готовыми к использованию в проекте.

Для печати

Переведите HEX в CMYK перед отправкой в типографию. Цвета на экране (RGB/HEX) и в печати (CMYK) имеют разные цветовые охваты — то, что выглядит одинаково на мониторе, может заметно отличаться в печатном виде. Такие инструменты, как Adobe Illustrator и Affinity Designer, делают эту конвертацию автоматически при экспорте для печати.

Почему извлечённый цвет может отличаться от того, что вы искали

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

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

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