Зачем это нужно
В основном для трёх задач:
- Подобрать интерфейс под главную картинку или фотографию товара.
- Вытащить фирменную палитру из логотипа, когда брендбук никто не может найти.
- Получить фоновый цвет, который подкладывается под изображение без видимого шва.
Коротко о медианном сечении
Усреднение всех пикселей даёт средний цвет, а для картинки более чем с одним оттенком это мутно-коричневый. Медианное сечение обходит это, деля цветовое пространство, а не пиксели: все пиксели начинают в одном ящике, ящик с самым широким разбросом режется пополам по своей широчайшей оси, и так до нужного количества ящиков. В результате разные оттенки остаются разными.
Извлечённая палитра — не доступная палитра
Цвета, взятые из фотографии, обычно близки по светлоте, потому что так устроен хорошо экспонированный снимок. Два таких цвета рядом часто не проходят по контрасту для текста. Используйте извлечённые оттенки как отправную точку и задавайте собственные значения светлоты: палитра говорит, из чего состоит изображение, а не каким должен быть ваш интерфейс.
Как забрать результат
Панель под образцами выдаёт палитру в виде CSS-переменных — форма, которая нужна большинству проектов. Если собираетесь выводить более светлые и тёмные ступени, сначала переключите нотацию на HSL: менять канал L у значения HSL гораздо понятнее, чем подкручивать три шестнадцатеричные составляющие.
Вопросы
Как выбираются цвета?+
Квантизацией методом медианного сечения. Все пиксели кладутся в одну корзину, и корзина с самым широким разбросом цвета многократно делится по этому разбросу, пока корзин не станет столько, сколько цветов вы запросили. Среднее каждой корзины становится образцом. Если вместо этого просто усреднить всё изображение, для картинки более чем с одним оттенком получится грязь — поэтому наивные «поиски доминирующего цвета» так часто возвращают серый.
Почему цвета идут именно в таком порядке?+
По доле изображения, которую каждый занимает, — от большей к меньшей. Поэтому верхний образец и есть тот цвет, который зритель воспринимает как основной, а не просто самый насыщенный.
Считываются ли все пиксели?+
Нет, и это не нужно. Изображение вписывается в квадрат 400 пикселей и опрашивается уже там: несколько тысяч равномерно распределённых пикселей дают ту же палитру, что и двадцать четыре миллиона, и возвращаются мгновенно. Почти прозрачные пиксели пропускаются — они не часть того, что видно.
Можно взять эти цвета прямо в дизайн?+
Как отправную точку. Цвета, вытащенные из фотографии, редко доступны в паре друг с другом: они сгруппированы по светлоте, потому что так устроена фотография. Возьмите оттенки, а светлоту и контраст задайте сами, а не вставляйте палитру как есть.