Перейти к основному содержимому
Tooletto

Извлечь цветовую палитру из фотографии

Готовый вариант «Извлечение цветовой палитры»

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

  • Файлы никогда не покидают ваше устройство
  • Бесплатно, без регистрации
  • Без водяных знаков
  • Работает офлайн после загрузки
Loading tool…

Как пользоваться: извлечение цветовой палитры

  1. 1

    Добавьте изображение

    Перетащите фотографию, скриншот или макет — либо вставьте из буфера обмена.

  2. 2

    Выберите количество цветов

    Пять-шесть цветов обычно оптимальны для практичной палитры.

  3. 3

    Скопируйте значения

    Для каждого образца указаны значения HEX и RGB, а также доля изображения, которую он занимает.

Создание темы именно на основе фотографии

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

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

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

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

Как выбираются цвета?

С помощью медианного отсечения (median-cut) — цвета изображения последовательно разбиваются на группы вдоль их самой широкой оси, пока не останется нужное количество групп, а взвешенное среднее каждой группы становится образцом. Это тот же алгоритм, что используется для палитр GIF, и он отдаёт предпочтение цветам, которые одновременно и отличаются от других, и часто встречаются.

Почему палитра отличается от того, что я вижу?

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

Что означает процент?

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

Учитываются ли прозрачные области?

Нет. Полностью прозрачные пиксели исключаются, поэтому логотип на прозрачном фоне вернёт цвета самого логотипа, а не будет «утянут» в сторону чёрного.