Генерация цвета для аватара

Я опущу детали о том что аватары могут быть разных типов, размеров, с различными индикаторами. Все это можно почитать тут или тут.

Речь пойдет о генерации цвета фона аватара в тех случаях когда не загружено фото.

Во-первых нужно определиться как будет назначаться цвет пользователю. Я решил привязать цвет к его имени и фамилии. После этого Сергей Пескоструев всегда будет иметь Оранжевый цвет, а Антон Криворогов — другой.

⛔ Но тут возникает проблема: т.к. цвета случайные - они зачастую вырвиглазные

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

Это легко сделать если перевести цвета в цветовое пространство HSL. Это цветовое пространство имеет 3 значения:

Оттенок (0° — 360°)

Оттенок определяет цвет сам по себе и измеряется в градусах вокруг цветового круга. Например, 0° соответствует красному, 120° — зеленому, 240° — синему, и так далее.

Насыщенность (0% — 100%):

Насыщенность определяет чистоту цвета. На 100% цвет максимально насыщенный и яркий, а на 0% цвет полностью выгорел и становится оттенком серого.

Светлота (0% — 100%):

Светлота представляет собой яркость цвета. 0% соответствует черному цвету, 100% — белому цвету, а значения между ними определяют, насколько светлым или темным является цвет.

Например:

Для каждой темы можно задать статичную насыщенность и светлоту и на основе имени и фамилии генерировать только оттенок

// Преобразование строки в хеш const hue = computed(() => { const hash = md5(props.name || props.label).toString() return parseInt(hash, 16) % 361 })

&.v-theme--light { background: hsl(var(--avatar-hue) 80% 80%); } &.v-theme--dark { background: hsl(var(--avatar-hue) 30% 30%); }

Надеюсь было интересно. Если это так - залетайте на мой телеграм-канальчик про UI/UX/AI

13 комментариев

Cindy Moore

13.09.2023

поставить фото на аватар и тогда генерировать ничего не нужно

Ответить

Freddy Monk

А какому целевому действию мешают перенасыщщеные аватары в первом варианте? Второй вариант уж совсем сперморазбавленный, лучше поменьше люминосити на 20-30%

Виталий Разраз

Автор

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

По поводу разбавленности - дело вкуса, дизайн системы и уместности

Милая Мила

А как же те цвета, которые нравятся именно тебе?

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