Алгоритм автоматического подбора к изображению гармоничного цвета

на основе теории цвета Йоханссона Иттена

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

Использование блюра увеличенного изображения на бэкграунде

На мой взгляд, этот подход имеет ряд минусов: создает визуальную грязь, плохо работает с светлыми изображениями и уже давно не является оригинальным.

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

Использование цвета на бэкграунде

Работу алгоритма я опишу на примере музыкального сервиса Яндекс.Музыка, где он был мной внедрен.

Алгоритм, условно можно разделить на 4 этапа:

  1. Строим цветовой круг и определяем дополнительные цвета
  2. Определяем средний цвет изображения
  3. Подставляем средний цвет изображения в цветовой круг и определяем его дополнительный цвет (гармоничный)
  4. Вычисляем площади цветовых объектов, чтобы определить насыщенность дополнительного цвета

1. Строим цветовой круг и определяем дополнительные цвета

Разложим фирменные цвета Яндекса в цветовой круг Иханнеса Иттена, недостающие цвета (оранжевый и красно-фиолетовый), получим путем смешивания соседних.

Разложили фирменные цвета в цветовой круг Иттена

Получаем пары дополнительных цветов, которые расположены на противоположных сторонах цветового круга Иттена. Закон дополнительных цветов является основой композиционной гармонии, так как при его соблюдении в глазах создается ощущение полного равновесия.

Дополнительные цвета

2. Определяем средний цвет изображения

Есть множество способов определения среднего цвета изображения, но самым простым, на мой взгляд, является уменьшение изображения до 1px.

Определяем средний цвет изображения

3. Подставляем средний цвет изображения в цветовой круг и определяем его дополнительный цвет

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

Из цветовых моделей CMYK, RGB, Lab, HSB мы будем работать с HSB (можно использовать и все остальные). Для определения в какой диапазон цветового круга попадает средний цвет изображения определяем его параметры Hue/тон (варьируется в пределах 0–360°).

Обозначили границы Hue каждого цвета

4. Вычисляем площади цветовых объектов, чтобы определить насыщенность дополнительного цвета

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

Определяем площадь изображения и подложки:

Изображение 200x200px = 40000px (S=a*b)
Подложка 950x260px = 247000px (S=a*b)

Считаем коэффициент:
247000/40000=6,175 (подложка больше изображения в 6,17 раз)

Отношения светлоты основных дополнительных цветов:
жёлтый : фиолетовый = 9:3 = 3 : 1 = 3/4 : 1/4
оранжевый : синий = 8:4 = 2 : 1 = 2/3 : 1/3
красный : зелёный = 6:6 = 1 : 1 = 1/2 : 1/2
среднее: 2:1

6,17/2=3,085

100%/3,085=32,41491085899514 = 32%

Уменьшаем светлоту подложки за счет наложения белой подложки с прозрачностью 68% (100%-32%=68%).

Получаем цвета для подложек:

Дополнительные цвета подложек

На выходе получаем результат:

Результат

Генерация неограниченного количества дополнительных цветов из существующих

Для генерации бесконечного множества дополнительных цветов из существующих необходимо смешивать соседние цвета.

Генерация неограниченного количества дополнительных цветов из существующих

PS

На мой взгляд, данный алгоритм можно применять не только в digital, но и для видео/рекламы/печатной продукции.

English version

Denis Kovalev
site blog linkedin behance

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Denis Kovalev

Denis Kovalev

454 Followers

Lead Product Designer at Revolut · Art Director at Sgustok Studio · Previously Yandex, Rambler and Tinkoff Bank. deniskovalev.com