Генерация цвета для аватара
Речь пойдет о генерации цвета фона аватара в тех случаях когда не загружено фото.
Во-первых нужно определиться как будет назначаться цвет пользователю. Я решил привязать цвет к его имени и фамилии. После этого Сергей Пескоструев всегда будет иметь Оранжевый цвет, а Антон Криворогов — другой.
На первом изображении видим, что некоторые цвета аватаров забирают слишком много внимания на себя, отвлекая от целевых действий. Хочется у всех аватаров приглушить/выровнять цвета как снизу, чтобы они были менее навязчивыми.
Это легко сделать если перевести цвета в цветовое пространство HSL. Это цветовое пространство имеет 3 значения:
Оттенок (0° — 360°)
- Оттенок определяет цвет сам по себе и измеряется в градусах вокруг цветового круга. Например, 0° соответствует красному, 120° — зеленому, 240° — синему, и так далее.
Насыщенность (0% — 100%):
- Насыщенность определяет чистоту цвета. На 100% цвет максимально насыщенный и яркий, а на 0% цвет полностью выгорел и становится оттенком серого.
Светлота (0% — 100%):
- Светлота представляет собой яркость цвета. 0% соответствует черному цвету, 100% — белому цвету, а значения между ними определяют, насколько светлым или темным является цвет.
Например:
Для каждой темы можно задать статичную насыщенность и светлоту и на основе имени и фамилии генерировать только оттенок
Надеюсь было интересно. Если это так - залетайте на мой телеграм-канальчик про UI/UX/AI
поставить фото на аватар и тогда генерировать ничего не нужно
А какому целевому действию мешают перенасыщщеные аватары в первом варианте? Второй вариант уж совсем сперморазбавленный, лучше поменьше люминосити на 20-30%
Ну например на их фоне нотификейшены не так бросаются в глаза. В высоконагруженных системах аватар - не самая важная вещь на которую нужно смотреть. Зачастую есть более важные вещи.
По поводу разбавленности - дело вкуса, дизайн системы и уместности
А как же те цвета, которые нравятся именно тебе?
Всегда можно задать большой список цветов каждому из которых будет присвоен ID. и потом назначать один из этих цветов. Но это другой подход и он на мой взгляд менее гибкий. В статье же я рассказал про свой кейс. Надеюсь кому-то будет полезно