Алгоритм автоматического подбора к изображению гармоничного цвета
на основе теории цвета Йоханссона Иттена
В ходе работы над веб или мобильным продуктом часто возникает потребность каким-то образом выделить определенный информационный блок, в котором присутствует изображение, текст и контролы. Наиболее частым приемом является использование блюра увеличенного изображения на бэкграунде.
На мой взгляд, этот подход имеет ряд минусов: создает визуальную грязь, плохо работает с светлыми изображениями и уже давно не является оригинальным.
Мне больше всего нравится использовать чистые цвета на бэкграунде, особенно если они являются фирменными цветами проекта, при помощи автоматического алгоритма, о котором ниже пойдет речь.
Работу алгоритма я опишу на примере музыкального сервиса Яндекс.Музыка, где он был мной внедрен.
Алгоритм, условно можно разделить на 4 этапа:
- Строим цветовой круг и определяем дополнительные цвета
- Определяем средний цвет изображения
- Подставляем средний цвет изображения в цветовой круг и определяем его дополнительный цвет (гармоничный)
- Вычисляем площади цветовых объектов, чтобы определить насыщенность дополнительного цвета
1. Строим цветовой круг и определяем дополнительные цвета
Разложим фирменные цвета Яндекса в цветовой круг Иханнеса Иттена, недостающие цвета (оранжевый и красно-фиолетовый), получим путем смешивания соседних.
Получаем пары дополнительных цветов, которые расположены на противоположных сторонах цветового круга Иттена. Закон дополнительных цветов является основой композиционной гармонии, так как при его соблюдении в глазах создается ощущение полного равновесия.
2. Определяем средний цвет изображения
Есть множество способов определения среднего цвета изображения, но самым простым, на мой взгляд, является уменьшение изображения до 1px.
3. Подставляем средний цвет изображения в цветовой круг и определяем его дополнительный цвет
Определяем в какой из цветовых диапазонов входит средний цвет изображения, и по цветовому кругу находим его дополнительный цвет (расположены диаметрально).
Из цветовых моделей CMYK, RGB, Lab, HSB мы будем работать с HSB (можно использовать и все остальные). Для определения в какой диапазон цветового круга попадает средний цвет изображения определяем его параметры Hue/тон (варьируется в пределах 0–360°).
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, но и для видео/рекламы/печатной продукции.
—
