Извлечь цветовую палитру из фотографии
Готовый вариант «Извлечение цветовой палитры»
Постройте цветовую схему на основе фотографии. По умолчанию выбрано шесть цветов — этого достаточно, чтобы охватить диапазон оттенков фотографии, не создавая почти неразличимых дублей, которые трудно отличить друг от друга в дизайне.
- Файлы никогда не покидают ваше устройство
- Бесплатно, без регистрации
- Без водяных знаков
- Работает офлайн после загрузки
Как пользоваться: извлечение цветовой палитры
- 1
Добавьте изображение
Перетащите фотографию, скриншот или макет — либо вставьте из буфера обмена.
- 2
Выберите количество цветов
Пять-шесть цветов обычно оптимальны для практичной палитры.
- 3
Скопируйте значения
Для каждого образца указаны значения HEX и RGB, а также доля изображения, которую он занимает.
Создание темы именно на основе фотографии
Извлечение палитры из фотографии — совсем другая задача, чем извлечение её из логотипа или плоского макета, потому что фотография несёт в себе непрерывное освещение и тени, а не небольшой набор продуманных однородных цветов: одна и та же красная рубашка может дать десяток едва отличающихся друг от друга образцов на освещённых и затенённых участках, прежде чем квантование сгруппирует их обратно вместе. Шести цветов достаточно, чтобы охватить этот диапазон — пара доминирующих тонов, дополнительный цвет и один-два акцента, взятые из меньших, но визуально выделяющихся участков, — без того, чтобы палитра схлопнулась в шесть почти одинаковых оттенков одного и того же цвета.
Палитра, построенная таким образом, скажем, из фотографии пейзажа или товара, обычно хорошо подходит в качестве отправной точки для темы сайта или макета дизайна: самый распространённый образец (как правило, самая большая область — например, небо или задний план) естественным образом становится фоновым цветом или приглушённым цветом поверхности, а образцы поменьше, но с всё ещё заметной долей покрытия, — естественные кандидаты на роль акцентов именно потому, что алгоритм уже отдал предпочтение цветам, которые визуально выделяются на фоне остального изображения.
Прежде чем закреплять за образцом конкретную роль в дизайне, стоит проверить процент покрытия: цвет, занимающий 45% исходной фотографии, будет выглядеть подавляюще, если использовать его как небольшой акцент, а цвет, занимающий лишь 3%, попросту потеряется, если сделать его крупной фоновой заливкой. Сопоставление доли покрытия образца с ролью схожего визуального веса в новом дизайне обычно даёт более сбалансированный результат, чем выбор исключительно по тому, какой цвет красивее смотрится сам по себе.
Часто задаваемые вопросы
Как выбираются цвета?
С помощью медианного отсечения (median-cut) — цвета изображения последовательно разбиваются на группы вдоль их самой широкой оси, пока не останется нужное количество групп, а взвешенное среднее каждой группы становится образцом. Это тот же алгоритм, что используется для палитр GIF, и он отдаёт предпочтение цветам, которые одновременно и отличаются от других, и часто встречаются.
Почему палитра отличается от того, что я вижу?
Потому что глаз тянется к *объекту*, а алгоритм считает пиксели. Фотография красной машины на траве вернёт в основном зелёные оттенки, потому что именно они и составляют большую часть изображения. Обрезка до нужной части даёт ту палитру, которую вы ожидали увидеть.
Что означает процент?
Долю пикселей, отнесённых к этому образцу. Это хороший показатель визуального веса цвета — цвет, занимающий 40% изображения, будет доминировать в любом дизайне, построенном на этой палитре, поэтому обычно ему место в фоне, а не в акцентах.
Учитываются ли прозрачные области?
Нет. Полностью прозрачные пиксели исключаются, поэтому логотип на прозрачном фоне вернёт цвета самого логотипа, а не будет «утянут» в сторону чёрного.
Вам также может понадобиться
Выбор и конвертер цвета
HEX, RGB, HSL, CMYK и проверка контраста
Сжатие PNG
Уменьшите размер PNG-файлов, сохранив прозрачность
Изменение размера изображения
Меняйте размеры изображения в пикселях или процентах
Удаление фона
Вырежьте фон с любой фотографии прямо в браузере
Сжатие JPG
Уменьшите размер JPG-файлов без заметной потери качества
Обрезка изображения
Обрезайте перетаскиванием, с готовыми пропорциями
Генератор favicon
Все размеры favicon и HTML-код для установки
HEIC в JPG
Конвертируйте фотографии HEIC с iPhone в JPG прямо в браузере