Палитра цветов из фото: главные цвета и их HEX-коды

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

Откройте фото или сделайте кадр в режиме Snap и перейдите в Photo Colors. Color Identifier выделит до десяти главных цветов изображения, подберёт к каждому ближайший именованный цвет и покажет их полосой образцов. Сохраните набор как палитру и копируйте HEX или RGB любого её цвета. Просмотр и сохранение палитр из фото доступны в Pro.

Как приложение выбирает главные цвета

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

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

Как получить чистую палитру

Берите хорошо освещённый снимок без фильтров. Фильтр сдвигает все цвета в одну сторону — это может быть ровно то, что нужно для «тёплой» или «плёночной» схемы, но к самой сцене такая палитра уже не относится.

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

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

Сохранение палитры и перенос кодов

Сохранённую палитру можно переименовать, поменять цвета местами и отредактировать. С Pro число сохранённых палитр не ограничено. Нажмите на любой цвет, чтобы скопировать его HEX для переменных в CSS, стилей в Figma, фирменного набора в Canva или темы в PowerPoint и Keynote.

Поделиться палитрой можно картинкой с образцами и текстовым списком вида «Название (#hex)»: его удобно вставить в заметку, бриф или сообщение в Telegram. Палитру можно и сохранить в «Фото». Отдельного файла для дизайн-программ приложение не создаёт, так что коды переносятся через буфер обмена или этот список.

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

Гармонии и проверка контраста

Если к палитре нужен ещё один цвет, откройте цветовой круг. От базового цвета он строит гармонии: комплементарная доступна бесплатно, а аналоговая, триадная, сплит-комплементарная, тетрадная и монохромная — в Pro. У каждого цвета гармонии есть кнопки копирования HEX и RGB.

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

Где пригодится палитра из фото

Соберите цвета для карточек товара на Wildberries или Ozon из снимка самого товара, чтобы оформление перекликалось с упаковкой. Возьмите тему презентации с пейзажа, а оформление Telegram-канала или сообщества ВКонтакте — с любимого кадра. Ведите отдельные палитры для сезонов и рекламных кампаний, чтобы следующий проект начинался с готовых цветов, а не с чистого листа.

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

Сколько цветов будет в палитре из фото?

До десяти: основные области снимка плюс несколько акцентов. Сохраните набор целиком, а лишние цвета уберите потом.

Почему палитра получилась серо-бежевой?

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

Коды палитры совпадают с пикселями фотографии?

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

Можно ли выгрузить палитру файлом для Figma?

Отдельного файла нет. Поделитесь палитрой списком «Название (#hex)» или скопируйте HEX каждого цвета и заведите стили в Figma вручную — для десяти цветов это пара минут.

Можно ли собрать палитру прямо с камеры?

Да. В режиме Snap кадр замораживается, и из него палитра собирается так же, как из готового фото.