Некоторые детали:
Я делаю небольшой прототип во Framer, какое-то приложение для обоев. Я использую vibrant.js для автоматического выбора цветов из изображений, чтобы добавить немного оттенка моему интерфейсу. Я использую два ярких цветовых профиля: «DarkMuted» — для фона и «Vibrant» — для активных элементов управления/акцентов и т. д.
К сожалению, сочетание цветов иногда выглядит тусклым и ненасыщенным, активные элементы выделяются не так сильно, как хотелось бы. Поэтому моим первым решением было
Слепое редактирование цветов.
Я преобразовываю их в hsl и явно устанавливаю значения s и l.
s: .2, l: .2 # DarkMuted
s: .6, l: .8 # Vibrant
Это создает достаточный контраст между ними, но также имеет недостаток: иногда цвета выглядят немного перенасыщенными и искаженными (по сравнению с входными данными).
По этой ссылке вы можете найти пары скриншотов, чтобы показать вам разницу между "исходной" цветовой парой возвращаемый "vibrant.js" и цветами с скорректированными значениями s и l.
Я уже спрашивал на другом форуме если есть возможность применить автоматическую корректировку цвета, нормализовать воспринимаемое смещение для некоторых цветовых диапазонов. Ответ был "почти невозможно".
Я бы сказал, что субъективно приемлемая цветопередача составляет ~ 65%, но результат слишком непредсказуемый. Поскольку это автоматическое решение, я не могу полагаться на него слишком сильно.
Поэтому я решил подойти к этому иначе:
Создайте кучу цветов и отфильтруйте один
Проблема вот в чем:
Я не нашел, как генерировать более одного цвета для профиля с помощью dynamic.js.
Кроме того, я попробовал библиотеку color-thief.js, чтобы создать палитру доминирующих цветов, а затем отфильтровать, как я это называю, "яркий" цвет.
# Threshold values I used
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}
Но тут возникает другая проблема - не в каждом изображении есть набор цветов, который попадает под мой порог. Некоторые изображения имеют пастельную гамму или ч/б и ничего не возвращают.
So,
Могу ли я преодолеть ограничение Vibrant.js 1 цвет на профиль, чтобы иметь несколько «ярких» цветов, а затем выбрать тот, который соответствует моим требованиям?
Или, может быть, есть другое/лучшее решение?
